英文:
Prevent calling global function for each same element on the same page when 'click' event is invoked
问题
我遇到一个问题,页面上有两个按钮removeButton
,它们具有相同的选择器$("div[data-lookup-entity-type=some_type] .js-lookup-clear");
。
所以当我点击'X'(清除)按钮时,会出现两个确认对话框(如下图所示):
这是当实际点击'X'按钮时注册click
事件的代码:
var removeButton = $("div[data-lookup-entity-type=some_type] .js-lookup-clear");
removeButton.on("click", function () {
var accessGroupControl = $("div[data-lookup-entity-type=some_type] input[type='hidden']");
var selectedAccessGroup = accessGroupControl.val();
if (isStringUndefinedOrNullOrEmpty(selectedAccessGroup)) {
return true;
}
app.confirm.showConfirmation({
text: "some text",
caption: "some caption",
resolveButtonText: "Yes",
rejectButtonText: "No",
reverse: true
}).then(function () {
removeButton.unbind("click");
removeButton.click();
});
return false;
});
我认为有两个相同的按钮(我的意思是相同的选择器:$("div[data-lookup-entity-type=AccessCode] .js-lookup-clear");
)导致确认对话框被调用两次。
我尝试解决showConfirmation
的绑定问题,部分成功:只调用了一个确认对话框,但出于某种原因,输入元素中的值被清除。
是否有其他解决该问题的选项,而不需要对HTML进行任何更改或其他操作?或者问题甚至不是在全局showConfirmation
函数或回调本身吗?
英文:
I encountered a problem having two buttons removeButton
with the same selector $("div[data-lookup-entity-type=some_type] .js-lookup-clear");
on a page.
So when I am clicking on 'X' (clear) button then two confirmation dialog appears (screen below):
That is the code that registers click
event when 'X' button is being actually clicked:
var removeButton = $("div[data-lookup-entity-type=some_type] .js-lookup-clear");
removeButton.on("click", function () {
var accessGroupControl = $("div[data-lookup-entity-type=some_type] input[type='hidden']");
var selectedAccessGroup = accessGroupControl.val();
if (isStringUndefinedOrNullOrEmpty(selectedAccessGroup)) {
return true;
}
app.confirm.showConfirmation({
text: "some text",
caption: "some caption",
resolveButtonText: "Yes",
rejectButtonText: "No",
reverse: true
}).then(function () {
removeButton.unbind("click");
removeButton.click();
});
return false;
});
I assume that having two identical buttons (I mean same selectors: $("div[data-lookup-entity-type=AccessCode] .js-lookup-clear");
) causes the confirmation dialog call twice.
I was trying to tackle with binding of showConfirmation
that was partially successful: there's been invoked just one confirmation dialog, but for any reason the value in the input element was cleared.
Is there any other options to solve that problem without any changes in HTML or something? Or may be the problem is not even in a global showConfirmation
function or a callback itself?
答案1
得分: 1
以下是要翻译的内容:
在这个语句中(在showConfirmation()
之后的then
处理程序内),removeButton
是一个包含多个元素的 jQuery 集合。在集合上调用 click()
会点击集合中的所有元素。
似乎缺少的是在调用 showConfirmation
之前识别和记住被点击的 HTML 元素的代码。虽然无法提供适合实际应用架构的代码,但建议首先将 removeButton
重命名为 removeButtons
作为第一步。
英文:
The problem code:
removeButton.click();
In this statement (inside the then
handler after showConfirmation()
),
removeButton
is a jQuery collection containing multiple elements. Calling click()
on the collection clicks all elements in the collection.
What seems to be missing is code to identify and remember the HTML element clicked, before calling showConfirmation
. While unable to provide code to fit the actual app's architecture, I suggest starting by renaming removeButton
to removeButtons
as the first step.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论