使用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(); 但这不起作用，因为它没有绑定到 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(); 正确触发了事件。谁能解释一下？

原文由 Simon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

直接调用原生 DOM onclick （ 见演示）：

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

或者，根本没有 jQuery，

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

---

更新：

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

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

我们如何解决这个问题？我们首先手动选中复选框，然后调用内联处理程序。不幸的是，我们不能使用 jQuery 的 .click() 来调用内联处理程序，因为它会再次取消选中复选框（如果您将来添加这些，它还会调用其他 jQuery 绑定的事件处理程序，您可能不会’想要那个）。因此我们使用我之前描述的本机 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() 并且可以工作，因为它执行我上面描述的操作（首先选中复选框，然后调用内联代码）。不过有一个警告：这也会调用任何与 jQuery 绑定的事件处理程序，这可能不是您想要的。

原文由 David Tang 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

我在 html 中将触发器与 onclick 事件一起使用，如下所示：

 $("#test_default").trigger("onclick");

原文由 borchvm 发布，翻译遵循 CC BY-SA 3.0 许可协议