使用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

---

<input id="test_value" name="test_value" value="xyz" /> 上没有类型。你可能必须绑定 click() 或使用 live()。 - Diablo

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

---

太好了。感谢您澄清我的主要代码位于 $("input[type=checkbox]:checked").each(function() {}); 中，所以无论如何都能正常工作。很高兴解决这个问题。 - Simon

Answer 2

我使用了以下的HTML代码，用于触发onclick事件：

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

- borchvm

---

这对我有用。但是我使用了.trigger("click")而不是.trigger("onclick")。再次感谢！ - Annie Lagang

很高兴认识你，@AnneLagang。 - borchvm

这是更好的。 - Merrin K

Answer 3

只要不 return false 就会调用它：

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

如果您想防止默认操作，请使用e.preventDefault()，这不会终止事件。此外，关于您的内联onclick处理程序（为什么不全部都以非侵入方式实现？），我强烈建议不要使用with。

- Nick Craver

---

它是由CMS生成的，这是HTML标准的噩梦。 - David Tang

谢谢。这也行。但是 @Box9 在一分钟之前做到了，并且使用更少的字符。你的优势在于稍后能够使用 .click() 方法。干杯。 - Simon

@Simon - 字符越少并不意味着越正确，为什么要禁用你不需要的事件？如果你想要更少的字符并且在处理程序中没有其他内容，请使用$("#test_default").click()，但这不是你所问的 :) - Nick Craver

Nick，你的回答绑定了第二个处理程序并触发它，而@Simon的问题似乎只是询问如何触发内联的onclick属性。虽然jQuery的.click()应该可以触发这段内联代码，但我想可能有其他原因阻止了它的执行，因为Simon说$("#test_default").click();不起作用。如果是这样的话，我不明白这个答案有什么不同，为什么需要任何绑定。 - David Tang

@Simon - 它确实有效，这是一个排序问题，我会在此处使用onchange内联，然后使用jQuery的click（如果可能），像这样：http://jsfiddle.net/nick_craver/GtJjt/4/ - Nick Craver

非常奇怪。如果我将你的代码复制到原始代码中，它就无法工作。 - Simon

Answer 4

我使用以下代码：

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

在你的情况下：

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

- Juan Carlos Velez