javascript - 使用jQuery触发html onclick事件

Question

我有一些元素

<input type="text" id="test_value" name="test_value" value="xyz" />
<input id="test_default" name="test_default" type="checkbox" onclick="with(this.form.elements['test_value']) { disabled = this.checked; if (this.checked) { value = ''; } else {if(value=='') {value=' '; value = '';}}};" />

内联 onclick 是由我无法控制的 CMS 生成的。我想使用 jQuery 执行 $("#test_default").click(); 但这不起作用，因为它没有绑定(bind)到 jQuery 事件管理器。

我一直在尝试以下变体:

$("#test_default").click(function (e) {
                    $(e.target).attr("onclick").apply(checkbox, [e]);
                    return false;
                }).click();

但是没有效果。请帮忙。

onclick 中可能内联有许多不同的函数。复制它们并并行运行它们并不是真正的选择。

答案在小型演示中有效，但在现场环境中无效。请看http://jsfiddle.net/GtJjt/我需要以编程方式触发该复选框。

奇怪的是，只有 $("#metadata_field_text_10190_default")[0].click(); 正确触发该事件。谁能解释一下吗？

Answer 1

直接调用原生 DOM 的 onclick ( see demo ):

$("#test_default")[0].onclick();

或者，根本没有 jQuery，

document.getElementById("test_default").onclick();

<小时/>

更新:

实际的问题在于 jQuery 的 .click() 和内联 onclick 代码之间的交互。 jQuery 的 .click() 实际上做了两件事:它首先触发任何事件处理程序，包括内联 onclick 代码，然后它会导致复选框被选中。

出现问题的原因是内联代码测试复选框是否被选中。因为这是首先触发的，所以代码发现复选框未被选中，并且不执行任何操作。现在，完成后，jQuery 将检查复选框。

我们如何解决这个问题？我们首先手动检查复选框，然后调用内联处理程序。不幸的是，我们不能使用 jQuery 的 .click() 来调用内联处理程序，因为它会再次取消选中该复选框(如果您将来添加这些事件处理程序，它还会调用其他 jQuery 绑定(bind)的事件处理程序) ，你可能不希望这样)。因此我们使用我之前描述的原生 DOM 方法，因为它的唯一作用是运行内联代码。

最终代码是这样的:

$("#metadata_field_text_10190_default").attr("checked", true)[0].onclick();

查看演示:http://jsfiddle.net/GtJjt/3/ 。 (我在演示的内联代码中添加了一个 console.log 来证明内联代码正在运行。如果您的浏览器不是 Firefox 或 Chrome，请将其删除，否则会崩溃)。

再次更新:

我之前没有看到你的解决方案，Simon，感谢你提醒我有关 [0].click() 的事情。本质上，它是 jQuery 的 .click() 的 native 等效项，并且可以工作，因为它执行我上面描述的操作(首先检查复选框，然后调用内联代码)。但警告:这还将调用与 jQuery 绑定(bind)的任何事件处理程序，这可能不是您想要的。