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

onclick直接调用本机DOM (参见演示):

$("#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");