jQuery - 通過點擊包含div提交按鈕

Question

我的表單通過單擊兩個按鈕中的一個來提交。

<form method="post" action="http://testing.com"> 
    <div class="container red"> 
    <button type="submit" name="some_name" value="some_value">Btn</button> 
    </div> 
    <div class="container blue"> 
    <button type="submit" name="some_other_name" value="some_other_value">Btn</button> 
    </div> 
</form> 

如果用戶點擊包含div，我希望它提交按鈕。我曾嘗試以下內容：

$("div.container").click(function(){ 
    $(this).find("button").click(); 
}); 

而且我也嘗試過.submit()，但都不起作用。我知道還有其他方法，例如使用隱藏的輸入和提交表單本身，但我很好奇如何通過按鈕進行特定提交。

正如你可以從this fiddle看到的，點擊按鈕的作品。點擊div什麼都不做。

Answer 1

嘗試登錄你的輸出，你會發現你的問題：

$(".container").on("click", function() { 
    console.log("Clicking"); 
    $("button", this).click(); 
}); 

主要生產1000個日誌事件，然後由於遞歸太多而死亡。顯然，孩子.click()正在觸發事件，然後傳播給父母，並且初始處理程序再次運行。

其他建議的解決方案只是提交表單是不正確的，因爲不會發佈與您想單擊的按鈕關聯的鍵值對。我能想到的最好方法是使用.one()，以便父代上的事件立即銷燬。這樣，你就保留張貼獨特的按鈕的值，但你會避免遞歸，(see Fiddle)：

$(".container").one("click", function() { 
    $("button", this).click(); 
}); 

Answer 2

嘗試

$(this).parent().submit(); 

Fiddle

更新：

爲了避免無限循環使用stopPropagation()

$("div.container").click(function(){ 
     $(this).children('button').click(); 
}); 

$("button").click(function(e){ 
    e.stopPropagation(); 
}); 

Fiddle 2

Answer 3

嘗試設置表單的名稱，如 「myForm的」

<form id="myForm" method="post" action="http://testing.com"> 
    <div class="container red"> 
     <button type="submit" name="some_name" value="some_value">Btn</button> 
    </div> 
    <div class="container blue"> 
     <button type="submit" name="some_name" value="some_value">Btn</button> 
    </div> 
</form> 

然後改變痘痘有點您的JavaScript，使用形式submit()方法

$("div.container").click(function(){ 
    $("#myForm").submit(); 
}); 

http://jsfiddle.net/SLkX2/4/

Answer 4

嘗試

$("div.container").click(function(){ 
    $(this).closest('form').submit(); 
}); 

http://jsfiddle.net/tarabyte/SLkX2/5/

Answer 5

與本地點擊更新時間：http://jsfiddle.net/SLkX2/7/

哦，什麼一個棘手的一個。這是一個使用問題：

$(someElement).click(); 

這實際上並不模擬本地點擊事件，如提交按鈕需要。 它做了一個jQuery點擊，這是一個非常細微的問題。 爲了模擬真實的鼠標點擊正是因爲用戶進行：
（警告，醜陋的低級代碼）

$("div.container").click(function(){ 
    var evt = document.createEvent("MouseEvents"); 
    evt.initMouseEvent("click", true, true, window, 0, 0, 
     0, 0, 0, false, false, false, false, 0, null); 
    $(this).find("button")[0].dispatchEvent(evt); 
});