How to apply jquery .change() for input elements that have id starting with a particular string regex

I am new to jquery and spring mvc. Recently I have been experimenting with Jquery AJax functionalities and got it working. Basically, my requirement is as soon as the user enters an item number in the text box, I need to get all the colors for that item from the server. I got this working for one item number. But, in my page the user adds these item numbers dynamically and the id's are also generated dynamically like itemNumber1, itemNumber2, itemNumber3, .....here is the code

<c:forEach var="i" begin="${start}" end="${end-1}" step="1" varStatus="status">
<tr>
    <td align="left"><label for="itemNumber${i}">Item
            Number${i+1}:</label></td>
    <td><form:input id="itemNumber${i}"
            path="createShoot.itemNumColors[${i}].itemNum" /></td>
    <td><form:select id="color${i}"
            path="createShoot.itemNumColors[${i}].colorCode">
            <form:option value="" label="Color" />
        </form:select>
    </td>
&l开发者_Go百科t;/tr>
</c:forEach>

To get the colors for one item number, here is the code

     $("#itemNumber1").change(function() {      
        alert('Handler for .change() called.'+$(this));
        $.getJSON('../app/getColors', {
            itemNum : $(this).val(),
            seasonConnectrixId: $('#selectSeason').val()
        }, function(data) {
            var html = '<option value="">Color</option>';
            var len = data.length;
            for ( var i = 0; i < len; i++) {
                html += '<option value="' + data[i].colorCode + '">'
                        + data[i].colorName + '</option>';
            }
            html += '</option>';

            $('#color1').html(html);
        });
    });

Now I want to apply the above on change for all the item Numbers that are dynamically added to the page..something like for all id's starting with itemNumber* apply .change().

Can someone please guide me on how I can achieve this. I used the following regex but it doesnt seem to work.

1) $('input:regex(id, itemNumber*)').change(function() {.....} 2) $('input[id^=itemNumber_]').change(function() {....}

Thanks in Advance,

Lakshmi

Thisd is because you have to use live:

 $('input[id^=itemNumber]').live('change', function() {....});

or delegate:

 $('tr').delegate('input[id^=itemNumber]', 'change', function() {....});

so that you apply it also to newly added elements. Using "change()" only binds event to elements that are already present.

EDIT - if you need to know the id of the element you could use this.id:

 $('input[id^=itemNumber]').live('change', function() {
     alert(this.id);
  });

The .live() function is removed in the 1.9 version of jQuery and later.

You should use .on() instead, and handle the event on a parent container.

Include a container in your html:

<div id="myContainer">
  <tr>
      <td align="left"><label for="itemNumber${i}">Item
              Number${i+1}:</label></td>
      <td><form:input id="itemNumber${i}"
              path="createShoot.itemNumColors[${i}].itemNum" /></td>
      <td><form:select id="color${i}"
              path="createShoot.itemNumColors[${i}].colorCode">
              <form:option value="" label="Color" />
          </form:select>
      </td>
  </tr>
</div>

And then use .on():

$('#myContainer').on('change', 'input[id^=itemNumber]', function() {
  alert(this.id);
});