1

我有一个这样的按钮元素的 id：'#edit-field-project-dnr-und-0-remove-button' 我想在这个按钮 id 中添加一个事件，例如：

  $('#edit-field-project-dnr-und-0-remove-button').click(function (){
          calculateDonorSum();               
       });

每当单击此按钮时，此按钮就是 ajax 按钮，旧 id'#edit-field-project-dnr-und-0-remove-button'被替换为'#edit-field-project-dnr-und-1-remove-button'等等，但在前一个按钮 id 中没有触发任何事件。有没有什么办法解决这一问题 ？

4

5 回答 5

1

当你这样做时：

$('#edit-field-project-dnr-und-0-remove-button').click(function (){
    calculateDonorSum();               
});

这会在当前 DOM 中搜索任何具有id="edit-field-project-dnr-und-0-remove-button"并将事件处理程序直接附加到该 DOM 元素的元素。

如果您删除该 DOM 元素并创建一些新的 DOM 元素或添加一个新的 DOM 元素，则该新 DOM 元素将不会附加此事件处理程序，除非您运行一些新代码将事件处理程序附加到新元素。

对于动态元素，也可以使用委托事件处理，但是您还没有真正描述足够多的内容让我们知道如何推荐它。我不知道您是要添加新按钮还是更改当前按钮的 ID。

如果您要添加一个新按钮并希望此类型的所有新按钮都具有此事件处理程序，那么您可以使用委托事件处理。委托事件处理的工作方式如下：

$("some static common parent selector").on("click", "some common child selector", fn);

所以，如果你的按钮都在一个id="container"div 中并且都有一个共同的类名class="calcButton"，那么你可以使用：

$("#container").on("click", ".calcButton", function() {
    calculateDonorSum();
});

并且，具有该类的容器中的所有按钮都将具有此事件处理程序，即使它们是在定义事件处理程序之后动态创建的。

关于委托事件处理的一些其他参考：

jQuery .live() 与 .on() 方法在加载动态 html 后添加点击事件

jQuery.on() 是否适用于在创建事件处理程序后添加的元素？

所有 jquery 事件都应该绑定到 $(document) 吗？

JQuery 事件处理程序 - 什么是“最佳”方法

于 2013-11-01T03:26:44.200 回答
1

考虑使用 jQueries 属性以选择器开头、包含或结尾

//button id starts with 'edit-field-project-dnr-und-' and ends with '-remove-button'
$("[id^=edit-field-project-dnr-und-][id$=-remove-button]").click(function () {
    calculateDonorSum();
});

如果这些按钮是动态创建的，请使用

$('#some-parent-container').on("click","[id^=edit-field-project-dnr-und-][id$=-remove-button]", function(){
   calculateDonorSum();
})

而不是 .click()

//button id starts with
$("[id^=button-]").click(function () {
    calculateDonorSum();
});

//button id ends with
$("[id$=-remove]").click(function () {
    calculateDonorSum();
});


//button id contains
$("[id*=-remove]").click(function () {
    calculateDonorSum();
});

这工作，在这里，做了一个小提琴 http://jsfiddle.net/MzPEg/1/

通常，仅当您无法控制原始按钮的命名/创建时才使用此方法。这些选择器不如 $('#id') 快，而且有点草率。但它会在紧要关头工作。

于 2013-11-01T03:58:41.883 回答
0

似乎应该发生 onclick 事件的字段的 id 正在更改，但您只处理第一个 id。如果您不想使所有这些 id 相同，则可以将 click 事件处理程序放在父包装 div 上。

于 2013-11-01T03:28:28.803 回答
0

你可以这样做：

$('#edit-field-project-dnr-und-0-remove-button').click(function (e){
e.preventDefault();          
calculateDonorSum(); 
$(this).attr('id','edit-field-project-dnr-und-1-remove-button');             
       });
于 2013-11-01T03:41:12.640 回答
0

使用匹配 id 的开始部分和结束部分的高级选择器：

$('[id^="edit-field-project-dnr-und"][id$="remove-button"]').on('click', function(){...});

于 2013-11-01T04:08:13.617 回答