Question

I am using http://www.bulgaria-web-developers.com/projects/javascript/selectbox/ to change a select box.

Here is a example: http://jsfiddle.net/ukkpower/bczrc/1/

I have a button when clicked gets the text inside an ‘a’ tag below it. I have two types of these ‘a’. One that is part of the code on page load and the other that get dynamicly created with the select box plugin.

I can get the text from the ‘a’ tags that are part of the page but the dynamic ones I get empty string. I can see the text on the screen and the text is there as it should be when I inpect with firebug.

Why would $(this).next(".menuItem").text() not work with the dynamic one? I should see: 14′ – €14.14

 //button to get text
<a href="javascript:void(0)" class="addToCart cart"></a>

<div id="sbHolder_51608882" class="sbHolder" tabindex="1">
    <a id="sbToggle_51608882" href="#" class="sbToggle"></a>
    <a id="sbSelector_51608882" href="#" class="sbSelector menuItem">14' - €14.14</a>
         <ul id="sbOptions_51608882" class="sbOptions" style="display: none;">
              <li><a href="#1" rel="1">6' - €6.66</a></li>
              <li><a href="#2" rel="2">12' - €12.12</a></li>
              <li><a href="#3" rel="3" class="sbFocus">14' - €14.14</a></li>
         </ul>
</div>

This works ok and is part of the page on load:

<a href="javascript:void(0)" class="addToCart cart"></a>
<span class="price menuItem">12' - €12.99</span>

Answer 1

Your expectations are incorrect. .next() fetches the immediate next element (sibling). Look at your HTML and you see that the sibling of:

<a href="javascript:void(0)" class="addToCart cart"></a>

Is :

<div id="sbHolder_51608882" class="sbHolder" tabindex="1">

If you want to access the anchor with class .menuItem which is within the div you need to go inside the div and find it.

$(this).next("div.sbHolder").find("a.menuItem").text();

DEMO – Display value from .menuItem

Edit
To address the 2 different scenarios you have one could apply some logic. This particular logic will work if you always have one or the other scenario. Off course, if you have completely random unpredictable scenarios this would not work.

$(".addToCart").on("click", function() {
    var $menuItem = $(this).next(".menuItem");

    if($menuItem[0] === undefined){
        $menuItem = $(this).next().find(".menuItem");
    }
    alert($menuItem.text());
});​

DEMO – Find immediate next with .menuItem or child with .menuItem of immediate next