如何过滤使用jQuery动态添加的一些内容?

时间:2013-08-12 09:36:58

标签: dynamic filter jquery jquery-delegate

首先,对不起我的英语,我还在学习:)。

我的问题是下一个,我用jQuery添加了一些HTML内容,特别是这些inputs

<td id="date"><input type="text" id="input_1" class="select" /></td>
<td id="date"><input type="text" id="input_2" class="select" /></td>
<td id="date"><input type="text" id="input_3" class="select" /></td>
<td id="date"><input type="text" id="input_4" class="select" /></td>
<td id="date"><input type="text" id="input_X" class="select" /></td>

输入数量取决于我的数据库中有多少个寄存器。

另一方面,我在jQuery中使用了相同内容的代码,但它没有动态添加。我在添加上面的内容后尝试执行此脚本:

$('input')
    .filter(function() {
    return this.id.match(/input_./);
})
.foo({
    ....
});

当我尝试使用动态内容应用相同的脚本时,它不起作用,它与任何内容都不匹配。

我了解了delegate()live()方法,但我不明白如何在我的情况下使用它们,因为我看到的所有示例都是处理程序事件。

有人知道如何解决这个问题。

提前致谢。

1 个答案:

答案 0 :(得分:0)

$(document).on('change', 'input[id^=input_]', function() {
    /* Do stuff */
});

所以你可以这样做 demo

// Wrap inside a document ready
// Read .on() docs (To ensure the elements...bla bla)
$(document).ready( function () {

    input_index = 0;

    setInterval(addInput, 1000);

    $(document).on('change', 'input[id^=input_]', function() {
        $(this).val($(this).attr('id'));
    });

    function addInput () { 
        $('<input type="text" id="input_'+input_index+'"/>')
          .appendTo('#empty')
          .change();   // <============================ Pay attention to this
        input_index++;
    }

});