javascript - 为什么事件委托不适用于 jquery on()

Question

我正在使用最新的 jQuery，它说.live()已弃用，.on()应该改用。我在将点击事件附加到按钮时遇到问题。我动态修改按钮值，应该能够处理这两种情况

<input type="text" ><input id="button_1" type="button" value="add" >
<input type="text"> <input id="button_2" type="button" value="add">

$('[id^="button_"]').on("click", "input", function() {
    $(this).val("delete");
    
    $('#button_'+$(this).attr('id').split('_')[1]).attr('id', 'delButton_'+$(this).attr('id').split[1]);
                                                     
});

$('[id^="delButton_"]').on("click", "input", function() {
    $(this).val("add");
    
    $('#delButton_'+$(this).attr('id').split('_')[1]).attr('id', 'button_'+$(this).attr('id').split[1]);
    
});

这是演示：jsfiddle

Answer 1

您只能将事件委托给祖先元素，但您正试图委托给同级元素。（实际上，我不确定你在做什么！）

所以如果你的标记是

<div class="buttonContainer">
    <input type="text" ><input id="button_1" type="button" value="add" >
</div>

你可以使用

$('.buttonContainer').on("click", "input", function() {
    // here, "this" will be the clicked input
});

以上将把对文本输入和按钮的点击委托给它们的父 div。单击任何元素将触发该功能。

如果您只想定位按钮，请将传递的选择器更改为.on：

$('.buttonContainer').on("click", '[id^="button_"]', function() {
    // here, "this" will be the clicked button
});

Answer 2

相当于：

$('[id^="button_"]').live("click", function() {

是：

$(document).on("click", '[id^="button_"]', function() {

但是，如果您可以使用比 更接近的祖先$(document)，那么您应该使用。