Javascript 使用jQuery触发html onclick事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4624670/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery to trigger html onclick event
提问by Simon
<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 = '';}}};" />
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.
内联 onclick 是由我无法控制的 cms 生成的。我想$("#test_default").click();用 jQuery执行，但这不起作用，因为它没有绑定到 jQuery 事件管理器。
I've been trying variations of
我一直在尝试变体
$("#test_default").click(function (e) {
$(e.target).attr("onclick").apply(checkbox, [e]);
return false;
}).click();
but with no avail. Please Help.
但无济于事。请帮忙。
Thanks.
谢谢。
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.
有许多不同的函数可以在 onclick 中内嵌。复制它们并并行运行它们并不是真正的选择。
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.
答案适用于小型演示，但不适用于实时环境。请查看http://jsfiddle.net/GtJjt/我需要以编程方式触发复选框。
Bizarrely only $("#metadata_field_text_10190_default")[0].click();triggers the event correctly. Can anyone explain this?
奇怪的是只$("#metadata_field_text_10190_default")[0].click();正确触发事件。谁能解释一下？
回答by David Tang
Call the native DOM's onclickdirectly (see demo):
onclick直接调用原生 DOM （见演示）：
$("#test_default")[0].onclick();
Or, without jQuery at all,
或者，根本没有 jQuery，
document.getElementById("test_default").onclick();
Update:
更新：
The actual problem is with the interaction between jQuery's .click()and the inline onclickcode. jQuery's .click()actually does two things: it firsttriggers any event handlers, includingthe inline onclickcode, thenit causes the checkbox to become checked.
实际问题在于 jQuery.click()和内联onclick代码之间的交互。jQuery.click()实际上做了两件事：它首先触发任何事件处理程序，包括内联onclick代码，然后它使复选框变为选中状态。
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.
问题出现是因为内联代码测试复选框是否被选中。因为这个是先触发的，代码发现checkbox没有勾选，什么都不做。现在完成后，jQuery 然后去检查复选框。
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.
我们如何解决这个问题？我们首先手动选中复选框，然后调用内联处理程序。不幸的是，我们不能使用 jQuery.click()来调用内联处理程序，因为它会再次取消选中复选框（如果您将来添加这些，它还会调用其他 jQuery 绑定的事件处理程序，您可能不希望那样）。因此我们使用我之前描述的原生 DOM 方法，因为它唯一的作用是运行内联代码。
Final code is this:
最终代码是这样的：
$("#metadata_field_text_10190_default").attr("checked", true)[0].onclick();
See demo: http://jsfiddle.net/GtJjt/3/. (I included a console.login 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).
见演示：http: //jsfiddle.net/GtJjt/3/。（我console.log在演示的内联代码中包含了一个以证明内联代码正在运行。如果您的浏览器不是 Firefox 或 Chrome，请删除它，否则会崩溃）。
Update again:
再次更新：
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.
我之前没有看到你的解决方案 Simon，谢谢你提醒我关于[0].click(). 本质上，它是 jQuery 的本机等价物.click()并且可以工作，因为它执行我上面描述的操作（首先选中复选框，然后调用内联代码）。警告：这也将调用与 jQuery 绑定的任何事件处理程序，这可能不是您想要的。
回答by Nick Craver
Just don't return falseand it'll get called:
只是不要return false，它会被调用：
$("#test_default").click(function (e) {
//hi!
}).click();
If you want to prevent a default action, use e.peventDefault()instead, which won't kill the event. Also, with respect to your inline onclickhandler (why not do it allunobtrusively?), I strongly recommend against using with.
如果您想阻止默认操作，请e.peventDefault()改用，这不会终止事件。另外，关于你的内联onclick处理程序（为什么不悄悄地做这一切？），我强烈建议不要使用with.
回答by borchvm
I used the trigger in html with onclick event as follows:
我在 html 中使用了带有 onclick 事件的触发器，如下所示：
$("#test_default").trigger("onclick");
回答by Juan Carlos Velez
I use the next code:
我使用下一个代码：
$("your_selector")[0].click();
In your case:
在你的情况下：
$("#test_default")[0].click();
