避免在同一页面上相同元素的“单击”事件被触发时调用全局函数。

huangapple go评论72阅读模式
英文:

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.

huangapple
  • 本文由 发表于 2023年2月24日 02:34:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/75548952.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定