jQuery中動態添加的元素的事件委托問題

Question

的HTML

<table>
<tr>
    <td>Col</td>
    <td>:</td>
    <td>
        <input type="text" name="" class="check-input" />
        <span class="error-input"></span>
    </td>
    <td><button class="add-input">Click</button></td>
</tr>
</table>

JQUERY

$('.add-input').on('click',function(){
    $(this).closest('tr').after('<tr><td>Col</td><td>:</td><td><input type="text" name="" class="check-input" /><span class="error-input"></span></td><td></td></tr>');
});

$('.check-input').on('change',function(){
    $(this).next().text('Error');
});

http://jsfiddle.net/ch2FM/3/

我無法將事件綁定到動態創建的元素。 我該怎么做？

Answer 1

嘗試這個

$(document).on('change','.check-input',function(){
    $(this).next().text('Error');
 });

演示

Answer 2

您誤解了事件委派。 事件委托是通過最接近的div完成的。 在這里，我使用了document，但是您可以使用最近的div將其用作事件委托。

用這個：

$(document).on('change','.check-input',function(){
    $(this).next().text('Error');
 });

演示

---

這是了解事件委托的鏈接

例：

// attach a directly bound event
$( "#list a" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});

// attach a delegated event
$( "#list" ).on( "click", "a", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});

Answer 3

您需要為祖先元素（例如document元素）分配on處理程序。 然后，您可以為元素指定確切的選擇器作為第二個參數：

$(document).on('change', '.check-input', function () {
    $(this).next().text('Error');
});

這基本上意味着：偵聽作為document元素后代的所有.check-input元素的change事件。

這是一個有效的例子