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

尝试

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

Fiddle

<强>更新

为避免无限递归，请使用stopPropagation()

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

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

Fiddle 2

Answer 2

尝试记录输出，您会发现问题：

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

生成1000个日志事件，然后由于递归过多而死亡。很明显，子.click()正在触发事件，然后传播到父节点并再次运行初始处理程序。

其他提议的简单提交表单的解决方案不正确，因为不会发布与您想要点击的按钮关联的键值对。我能想到的最好的方法是使用.one()，以便立即销毁父节点上的事件。这样你就可以保留发布唯一按钮的值，但是你将避免递归，(see Fiddle)：

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

Answer 3

使用原生点击进行了更新：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);
});

Answer 4

尝试将该表单设置为名称，例如“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>

然后使用submit()方法

形式更改您的javascript

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

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

Answer 5

尝试

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

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

jQuery - 单击包含div的提交按钮

5 个答案: