使用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生成的。 我想执行$("#test_default").click(); 使用jQuery，但这不起作用，因为它没有绑定到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 （ 参见演示 ）：

$("#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，它会删除它，否则会崩溃）。

再次更新 ：

我早先没有看到你的解决方案西蒙，谢谢你提醒我[0].click() 。 本质上它是jQuery的.click()的本机等价物，因为它完成了我上面描述的操作（首先检查复选框，然后调用内联代码）。 但是有一个警告：这也会调用任何与jQuery绑定的事件处理程序，这可能不是你想要的。

Answer 2

我使用html中的触发器和onclick事件如下：

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

Answer 3

只是不要return false ，它会被调用：

$("#test_default").click(function (e) {
  //hi!
}).click();

如果要阻止默认操作，请改用e.peventDefault() ，这不会e.peventDefault()事件。 此外，相对于你的网线onclick处理器（为什么不去做这一切悄悄地？），我强烈建议不要使用with 。

Answer 4

我用下一个代码：

$("your_selector")[0].click();

在你的情况下：

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