使用jQuery触发html onclick事件 [英] Using jQuery to trigger html onclick event

问题描述

<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事件管理器。

The inline onclick is generated by a cms which I have no control of. I want to execute $("#test_default").click(); with jQuery but that doesn't work because it's not bound to the jQuery event manager.

我一直在尝试各种变体

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

但无济于事。请帮助。

谢谢。

onclick中可能有几十种不同的内联功能。复制它们并并行运行并不是一个真正的选择。

There are dozens of different functions that may be in inline in the onclick. It isn't really an option to duplicate them and run them in parallel.

答案适用于小型演示，但不适用于实时环境。请查看 http://jsfiddle.net/GtJjt/ 我需要以编程方式触发复选框。

The answers work in a small demo but not in the live environment. Please look at http://jsfiddle.net/GtJjt/ I need the checkbox to be triggered programatically.

奇怪的是只有 $（＃metadata_field_text_10190_default）[0] .click（）; 正确触发事件。任何人都可以解释这个吗？

Bizarrely only $("#metadata_field_text_10190_default")[0].click(); triggers the event correctly. Can anyone explain this?

推荐答案

直接调用本机DOM的 onclick （ 查看演示）：

Call the native DOM's onclick directly (see demo):

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

或者，根本没有jQuery，

Or, without jQuery at all,

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

---

更新：

实际问题是jQuery的 .click（）和内联 onclick之间的交互代码。 jQuery的 .click（）实际上做了两件事：第一个触发任何事件处理程序，包括内联 onclick 代码，然后它会导致复选框被检查。

The actual problem is with the interaction between jQuery's .click() and the inline onclick code. jQuery's .click() actually does two things: it first triggers any event handlers, including the inline onclick code, then it causes the checkbox to become checked.

问题出现是因为内联代码测试是否选中该复选框。由于首先触发此操作，因此代码会发现未选中复选框，并且不执行任何操作。完成后，jQuery然后去检查复选框。

The problem arises because the inline code tests whether the checkbox is checked. Because this is triggered first, the code finds that the checkbox isn't checked, and doesn't do anything. Now after this is finished, jQuery then goes and checks the checkbox.

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

How do we fix this? We check the checkbox manually first, then call the inline handler. Unfortunately, we can't use jQuery's .click() to call the inline handler, because it will uncheck the checkbox again (it will also call other jQuery-bound event handlers if you add these in the future, you probably don't want that). Therefore we use the native DOM method I described earlier, since its only effect is to run the inline code.

最终代码是：

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

参见演示： http://jsfiddle.net/GtJjt/3/ 。 （我在演示的内联代码中包含一个 console.log ，以证明内联代码正在运行。如果您的浏览器不是Firefox或Chrome，请将其删除，否则会崩溃）。

See demo: http://jsfiddle.net/GtJjt/3/. (I included a console.log in the inline code for the demo to prove that the inline code was running. Remove this if your browser is not Firefox or Chrome or it will crash).

再次更新：

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

I didn't see your solution earlier Simon, thanks for reminding me about [0].click(). Essentially it is the native equivalent for jQuery's .click() and works because it does what I described above (checking the checkbox first, and then calling the inline code). A warning though: this will also call any event handlers bound with jQuery, which may not be what you want.

这篇关于使用jQuery触发html onclick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！