使用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();