表单提交上的jQuery绑定不起作用

Question

我有一个这样的表格：

<form class="category_form" id="category_form" method="post">
<p class="ui-widget">
    <label for="birds">Birds: </label> 
    <input id="birds" /> <a id="add_category" href="#">Add Category</a>
</p>

<p class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <textarea id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></textarea>
</p>

<p>
    <input type="submit" class="button" value="Add">
</p>
</form>

我有一个像这样的 jQuery 绑定函数：

$('#category_form').bind('submit',function()
{
    // Get the variables

    alert ("hello");

    return false;
});

我希望每次按下提交按钮时，jQuery 函数都会触发并发出警报，但由于某种原因，它并没有像我想象的那样工作。

现场示例在此测试页面上：http://problemio.com/test.php

知道为什么按下添加按钮不能使上述 jQuery 工作吗？

谢谢！！

Answer 1

您的绑定应该包含在$(document).ready 中，否则它会在表单存在于页面之前尝试绑定该表单：

$(document).ready(function(){
    $('#category_form').bind('submit',function(){
        ...
    });
});