jQuery selector stores object? How to force it not to?

Question

I have a dropdown ( < select > ) element and a container.

<div class='container' />
<script>
   var dropdown = "<select class='multi-dropdown'> ... </select>"
</script>

When the value is changed, You get another of it. It is logical, that this only happens when the document is ready ( the first one is made there ), and when the client modifies the last one.

$(document).ready( function(){
    $('.container').append(dropdown);
    $('.multi-dropdown:last').change(function(){
          $('.container').append(dropdown);
    }); 
});

Seems to be a working code for me. But what I noticed is, this is not working with the next appended dropdown element. Also if I change the original one, it fires.

My theory is, maybe jQuery already stored the original object as the :last , so it won't select a new element again even if I add new "last" ones.

or

The freshly created element ( this way ) isn't even selectable with jQuery.

Please argue in favor, or against, these are just my ideas.

That is not how jQuery works. Also note that using a self-closing tag (`
`) **will not work** in some document types. It'll be parsed, but it will not be treated as a closed element in an HTML document. — Pointy, Oct 08 '13 at 19:59
Because you are attaching the change handler to the current :last element, if it changes dynamically it will not be changed accordingly; try delegation instead. Can you provide a demo on jsfiddle? — Irvin Dominin, Oct 08 '13 at 20:00
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Jason P, Oct 08 '13 at 20:01

score 2 · Answer 1 · answered Oct 08 '13 at 20:00

2

The issue is that you're newly appended SELECT doesn't ever get an event bound to it. Just because you used the class to bind the change even for the initial SELECT, that doesn't automatically apply to every newly added element to the DOM.

Read up on delegated events, like for the on() function. Or use something like livequery.

answered Oct 08 '13 at 20:00

Gregg

31,994
13
93
189

Yeah, that's my exact problem. But please, could You explain me, how to select a new element? Because it's not just about binding the event linstener, but selecting the fresh element itself. – István Pálinkás Oct 08 '13 at 20:08
1

No, it's about event delegation. Go read the link I gave you for the on() function. – Gregg Oct 08 '13 at 20:09

score 1 · Accepted Answer · answered Oct 08 '13 at 20:05

Because you are binding the change handler to the :last element at page startup, if the last element changes dynamically it will not be changed accordingly; try and read deeply delegation using on method instead.

Like:

$(document).ready( function(){
    $('.container').append(dropdown);
    $('body').on('change','.multi-dropdown:last',function(){
        $('.container').append(dropdown);
    }); 
});

jQuery selector stores object? How to force it not to?

2 Answers2