如何将jquery .change()应用于id以特定字符串regex开头的输入元素

Question

我是jquery和spring mvc的新手。最近我一直在尝试Jquery AJax功能，并使其正常工作。基本上，我的要求是，只要用户在文本框中输入一个项目编号，我就需要从服务器获取该项目的所有颜色。我用了一个项目号。但是，在我的页面中，用户动态地添加这些项目编号，并且也动态地生成id，如itemNumber1、itemNumber2、itemNumber3、.....下面是代码

<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>
</tr>
</c:forEach>

要获取一个项目编号的颜色，下面是代码

     $("#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);
        });
    });

现在我想对所有动态添加到页面上的项目编号应用上述更改，例如对所有以itemNumber开头的id * apply .change()。

有人可以指导我如何才能做到这一点。我使用了下面的正则表达式，但它似乎不起作用。

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

Thanks in Advance，

Lakshmi

Answer 1

这是因为您必须使用live:

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

或委托:

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

以便您也将其应用于新添加的元素。使用"change()"只能将事件绑定到已经存在的元素。

EDIT -如果你需要知道元素的id，你可以使用this.id:

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

Answer 2

.live()函数在jQuery 1.9及以后的版本中被删除。

你应该使用。on()，并在父容器上处理事件。

在你的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>

然后使用。on():

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