Question

After cloning a select element and incrementing the “name” attribute, I am unable to select the cloned elements.

For example:

HTML

<select name="1"></select>

<select name="1-1"></select> <!-- cloned element -->
<select name="1-2"></select> <!-- cloned element -->

JS

$('[name^="1"]').change(function() {
    alert(1);
});

When I change the original element, it works fine I get the alert, but when I change one of the cloned elements, nothing happens. There are no errors.

Note: I am using “name” attribute instead of ID because I need to retrieve these cloned element values once the form is submitted

Should this work?? or is it that the cloned elements cant be selected?

Answer 1

Here’s the doc link for live()^DOC and here’s the one for delegate()^DOC

$('[name^=1]').live('change', function(){
  console.log('hi!');
});

Although it functions differently than a regular event handler (it’s actually listening for events on the document, so it “handles” the event on propagation. Delegate is a little more efficient because you give it a context to listen on:

$('form').delegate('select[name^=1]', 'change', function(){
  console.log('hi there!');
});