jQuery：表单内按钮的选择器答案

【问题标题】：jQuery: selector for button inside a formjQuery：表单内按钮的选择器
【发布时间】：2013-04-19 14:07:25
【问题描述】：

我在选择表单中的元素时遇到问题。代码如下所示：

    <div id="form"> 
        <form method="post" action="">
            <input id="txt_name" type="text" name="search" value="" />        
        <button type="submit">Search</button>
       </form>
    </div>

我需要使用 jquery 处理按钮上的点击/提交事件，如下所示：

<script type="text/javascript">
      $(document).ready(function () {
          $(":submit").click(function () { /*some scripting here*/

问题是点击事件被完全忽略，但是当我将按钮元素放在表单之外时，它工作得很好。看来我没有正确使用 jquery 选择器之类的。此外，我不能只将按钮放在表单之外，因为 post 方法由服务器端 C# 脚本处理并运行数据库访问。

【问题讨论】：

你能在按钮上添加一个 ID 并使用它吗？例如<button id="submit_button" type="submit">Search</button> 和 $('#submit_button').click(function () { /*some scripting here*/
您实际上也可以使用 $().submit() 事件。

标签： jquery forms jquery-selectors event-handling submit

【解决方案1】：

您可以使用“提交”事件 (jQuery Submit)。给您的表单一个 ID 并选择表单，或者直接选择它现在的样子。

//added an id of ='form-id' to the form
$('#form-id').submit(function(){

});

//as it is currently
$('#form form').submit(function(){

});

JSFiddle

【讨论】：

我以前和现在都试过这个。它只是不起作用，即使它应该起作用。
在我的回答中加了一个demo，看看吧。
这看起来很有希望，它的工作方式与使用此选择器提到的 jqueryrocks 相同： $('div#form form').submit(function() { });所以脚本打印的数据消失了。
好吧，您使用的是表单，因此它将遵循自然行为，即提交到目标页面。如果您想阻止表单提交（也许如果您通过 ajax 提交表单），您可以使用 preventDefault 阻止表单的默认操作。
差不多了，现在脚本中的数据仍然在页面上，但问题是表单没有发布......所以我的服务器脚本不会运行。

【解决方案2】：

另一种方法是给你的button 一个id，然后说：

$(document).ready(function () {
      $("#idOfSubmitButton").click(function () { /*some scripting here*/

【讨论】：

【解决方案3】：

$('div#form form').submit(function() { });

【讨论】：

这个解决方案看起来是正确的，只有一个问题 - 在脚本运行并打印一些数据后，它会在不到一秒的时间内再次消失。