Question

1. I have a form where the user can dynamically add fields (clone and increasing index).
   I use the sheepit plugin for doing this. You don’t need to dig into this plugin to answer this question.

2. Inside this additonal fields (which will be cloned and increased index) i have a select element which alerts the id of the element (infact it populates different fields depending on input, but faciliated for better illustration). The VERY simpliefied code for that function u find at the end.

The Problem is that if the user adds additional fields (1.), the “change” event from the jquery function does not get binded to the new created field. So (2.) does not work for the new field.

If i would do it with Javascript and add to the html an onchange event, this would work.

How can i do this with jquery?

Here the very simpliefied code:

change()

$(document).ready(function() { 
 $('.viewSelector').change(function() 
    {             
        //GET THE ID            
        var idint = $(this).attr('name');          
        alert(idint);
    });
});

I ONLY want to have this function work also at the new created fields.

Answer 1

Just use live():

$(document).ready(function() { 
  $('.viewSelector').live('change', function() {             
    //GET THE ID            
    var idint = $(this).attr('name');          
    alert(idint);
  });
});

This will bind the event to any new elements added to the DOM that match your selector