Button 带有jQuery的按钮事件
我有一个按钮元素的id,如下所示:Button 带有jQuery的按钮事件,button,jquery,Button,Jquery,我有一个按钮元素的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-p
“#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中没有触发任何事件。有任何方法解决此问题吗?执行此操作时:
$('#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();
});
并且,该类容器中的所有按钮都将具有此事件处理程序,即使它们是在定义事件处理程序后动态创建的
有关委派事件处理的其他参考资料:
似乎应该在其上发生onclick事件的字段的id正在更改,但您只处理第一个id。如果您不想使所有这些id都相同,可以将单击事件处理程序放在父包装器div上。您可以这样做:
$('#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');
});
考虑使用jquerys属性以选择器开始、包含或结束
//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();
})
而不是。单击()
这个作品,在这里,做了一把小提琴
通常,仅当您无法控制原始按钮的命名/创建时,才使用此方法。这些选择器没有$('#id')那么快,而且有点马虎。但它将在紧急情况下工作。使用与id开头部分和结尾部分匹配的高级选择器:
$('[id^=“edit field project dnr und”][id$=“remove button”]')。在('click',function(){…})上代码>是否添加了一个具有新id的按钮,并希望它与同一事件处理程序一起工作?是否将按钮的id更改为新的id值?你要删除旧按钮并添加一个新按钮吗?就像我键入的一样。选择器中的电源!
//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();
});