使用 jquery 更改按钮的事件绑定答案

【问题标题】：Change binding on event for button using jquery使用 jquery 更改按钮的事件绑定
【发布时间】：2014-05-12 18:56:24
【问题描述】：

我已将事件绑定到点击图标。该事件更改页面上按钮的 id。我希望将新事件绑定到该新 id，并将绑定到旧 id 的现有事件解除绑定。我该怎么做？

我可以从 Firebug 中看到，单击图标时按钮 ID 成功更改。但是，当我查看 POST 时，我看到 ID 为“Final_Approval”的隐藏字段的值为“Approved”，这告诉我发生了与原始按钮 ID 相关的事件，而我不希望它发生。我所有的 jquery 都准备好了。

原来的按钮：

<button id="btn-final-approval-no-review" class="btn btn-warning" type="submit">Final Approval</button>

与该 id 相关的原始事件：

$('[id^="btn-final-approval"]').click(function () {
    $("#Final_Approval").val("Approved");
});

点击图标时触发的事件：

$("#add-vendor-item").click(function () {
   $('#btn-final-approval-no-review').attr('id', 'btn-vendor-rep-review2');
}

我想举办的新活动：

$("#btn-vendor-rep-review2").click(function () {
    $("#ItemRequestStatusId").val("@Portal.BusinessModel.Entities.ItemRequestStatusId.VendorRepReview");
});

【问题讨论】：

不要更改 ID，并且不要期望绑定在页面加载上的事件处理程序突然开始使用您刚刚更改的元素。绑定的时候和选择器不匹配，所以没有绑定，句号！

标签： javascript jquery html javascript-events

【解决方案1】：

$(document).on('click', '#finalApproval', function() {

if($(this).hasClass('first')){
    $(this).removeClass('first');
    //first action to be preformed    
}else{
  //second action to be preformed.
}


});

然后只需将first 类添加到页面加载按钮。

如果您需要它切换回来，您可以在要执行的第二个操作区域中重新添加类 first 编辑

在重新阅读问题后，您可能无法使用this - 只需替换为相关项目的 id / 类并将 if/else 语句添加到该项目的处理程序。

【讨论】：

【解决方案2】：

在委托上使用动态绑定点击事件。

$("body").on("click","#btn-vendor-rep-review2", function () {    
    $("#ItemRequestStatusId").val("@Portal.BusinessModel.Entities.ItemRequestStatusId.VendorRepReview");
});

【讨论】：

【解决方案3】：

要将事件绑定到动态变化的元素，您需要使用 delegation 和 on():

$(document).on('click', '[id^="btn-final-approval"]', function() {
    $("#Final_Approval").val("Approved");
});

正如 adeneo 所说，您可能不应该移动 ID，而应该使用类。但同样的想法也适用，您只需更改 on() 调用中的选择器即可。

【讨论】：

我还将它添加到与原始 ID 相关联的点击事件中。我将修改我的代码以使用类而不是 id。