Question

我正在尝试使用jquery编写我认为应该是一个非常简单的chrome插件的内容。我有一个工具用于工作，我们的IT部门已停止支持Chrome，因为他们有足够的故障排除IE。然而，他们的解决方案只是删除旧的onClick函数，并将属性disabled =“diabled”添加到我们的所有按钮中。

我的简单解决方法是使用jquery正确删除禁用并附加onClick功能。我已经在一些实例中使用它，但我遇到的问题是使用ajax表单创建的新按钮实例。

以下是我目前正在尝试使用的代码：

function restoreFunctionality() {
    $("#RestoreDefaultsButton").removeProp("disabled").attr("onClick", "OnRestoreDeviceClientClick()");

}
RestoreFunctionality();

现在，这适用于初始加载，但我也希望这适用于将来要创建的每个按钮。为此，我补充道：

$("#RestoreDefaultsButton").on("restoreFunctionality", function(event) {
    $("#RestoreDefaultsButton").removeProp("disabled").attr("onClick", "OnRestoreDeviceClientClick()");
});

然而，这对我不起作用，但也没有提供任何类型的控制台错误消息告诉我为什么它不起作用。我似乎无法找到我想要的例子。我在jquery文档中看到了可以通过点击某处或类似的东西来调用它的例子，但是我想要的只是简单地“工作”。只需查找该按钮ID的新实例并进行更改。

on（）不是我想在jquery 1.11.1中使用的函数吗？我在某种程度上错误地使用这个吗？任何指导我指向正确方向的指导都会有所帮助。

编辑以澄清： 我不是想在多个位置多次编辑同一个按钮。我正在尝试并愿意为每个出现的按钮单独创建代码，因为我知道每个按钮的ID。

以下是我目前正在使用的一些示例：

该按钮的代码行为：

<input type="button" name="RestoreDefaultsButton" value="Submit" 
   id="RestoreDefaultsButton" disabled="disabled" class="aspNetDisabled InlineButtonStyle">

我正在使用的代码现在可以正常工作：

$("body").on("click", "#RestoreDefaultsButton", restoreDefaultFunctionality());

和restoreDefaultFunctionality（）只是：

$("#RestoreDefaultsButton").removeProp("disabled").attr("onClick", "OnRestoreDeviceClientClick()");

再次，上面的代码工作得很好。我似乎遇到的问题是，并非我的所有按钮都存在于加载状态，我可能会点击一个链接，该链接会在具有附加按钮的表单的同一页面/网址上加载模型。该按钮可能显示为：

<input type="button" name="OpenToolkitButton" value="Submit" id="OpenToolkitButton" disabled="disabled" class="aspNetDisabled InlineButtonStyle">

这与原始示例几乎完全相同，它刚刚在脚本第一次运行后加载。

我正在寻找的是一种解决方案，使我需要的所有单独指定的按钮，当它们出现时，删除该禁用并添加特定的onclick功能。

Answer 1

您似乎有几件事情错了，而且您使用.on()的方法不正确。

首先，文档中的ID必须是唯一的。您不能拥有多个具有相同ID的DOM元素。这是非法的HTML，无法正确使用选择器。因此，如果您尝试检测未来"#RestoreDefaultsButton"对象以及您已有的对象，则必须更改该对象，因为您不能拥有多个对象且仍然可以使用选择器代码正确。通常，当您想要查找多个相同类型的对象时，您希望使用类名而不是id。

其次，您使用.on()根本就不正确。 .on()允许您注册一个在触发某个DOM事件时将被调用的回调函数。所以，当你这样做时：

$("#RestoreDefaultsButton").on("restoreFunctionality", fn);

当单个"#RestoreDefaultsButton"对象触发"restoreFunctionality" DOM事件时，您要求jQuery调用您的函数。由于"restoreFunctionality"不是内置的DOM事件，因此唯一可能触发的方法是自己触发事件。

修改插入到DOM中的新创建对象的常用解决方案是找到创建这些对象的代码并插入函数调用（调用您自己的函数，可以找到并且＆＃34;补丁＆＃34 ;新创建的DOM对象在创建新创建的DOM对象之后。

最新的浏览器版本允许您注册回调，以便在将某些类型的对象添加到DOM时收到通知，以便您可以自动收到通知。这些通知称为MutationObservers（doc here）。不幸的是，这些事件仅在最新的浏览器（IE11）中实现，因此您通常不能仅依赖它们来获取一般网页。

您的点击处理程序分配可能可以通过委派事件处理来解决。在动态创建的对象的委托事件处理中，您会找到一个持久对象（不是动态创建的），它将位于动态创建的元素的父链中，并将click事件处理程序绑定到该父级。点击事件＆＃34; bubble＆＃34;在父链上，父项将看到click事件。使用.on()的委托形式，其工作原理如下：

$("static parent selector").on("click", "dynamic element selector", fn);

然后您可以处理事件而无需担心动态元素何时被创建/销毁等等......

您可以在这些参考资料中阅读有关委派事件处理的更多信息：

Does jQuery.on() work for elements that are added after the event handler is created?

jQuery .live() vs .on() method for adding a click event after loading dynamic html

jQuery .on does not work but .live does

Answer 2

你是否触发了＆＃34; restoreFunctionality＆＃34;构建ajax表单后的事件？

$("#RestoreDefaultsButton").trigger("restoreFunctionality");

如果在通话结束后和完成功能之前还有其他操作，请强制它同步 $（＆＃34;＃RestoreDefaultsButton＆＃34）。triggerHandler（＆＃34; restoreFunctionality＆＃34）;

无法使用jquery .on（）修改元素的属性

2 个答案: