Question

这是Firebug所示的HTML表单代码：

<form action="http://localhost/home/newuser" method="post">
    <input type="hidden" value="48" name="user_id">
    <input type="text" name="username">
    <input type="submit" value="Next">
</form>

这里绑定了一些jQuery代码：

$('.popup .newuser form').live('submit', function()
{
    $(this).ajaxSubmit(function(data)
    {
     // handle response
    });
    return false;
});

然而，当我点击“下一步”按钮时，会发生的情况是文本字段显示先前输入值的组合框（Firefox功能）。 Firebug的“网络”选项卡上没有显示HTML请求，并且jQuery侦听器中的断点未被命中。

感觉我错过了一些非常明显的东西......

更新：我意识到甚至有些奇怪的事情发生了：我无法通过键盘输入文本字段中的任何内容。我只能从Firefox组合框中选择以前的值。在这之后，我甚至无法选择框中的文字。

Answer 1

事实证明这个问题与jQuery或Javascript无关;相反，它位于CSS中，其中包含该表单的DIV的z-index为1，并且它本身包含在jQuery-UI对话框中，该框架给出了z-index为1001.显然这导致了内部DIV（因此形式）根本不接收任何键盘或鼠标事件。

Answer 2

<form action="http://localhost/home/newuser" method="post">
    <input type="hidden" value="48" name="user_id" />
    <input type="text" name="username" />
    <input type="submit" value="Next" />
</form>

将/放在输入元素的末尾

Answer 3

为什么不使用<form ... OnSubmit="yourfunction()"></form>？

Answer 4

我会把它放在评论中，但似乎我还没有这样做的特权。

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。旧版jQuery的用户应该使用.delegate（）而不是.live（）。

修改

用逗号分隔选择器而不是空格：

$('form, .popup, .newuser')

希望有所帮助

Answer 5

.live()现已弃用。对于跨浏览器支持，在较低版本中使用jQuery 1.7+或.on()时使用.delegate()。

.on（）示例：

$(document).on('submit', '.popup .newuser form', function(){
    $(this).ajaxSubmit(function(data){
       // handle response
    });
    return false;
});

.delegate（）示例：

$(document).on('.popup .newuser form', 'submit', function(){
    $(this).ajaxSubmit(function(data){
       // handle response
    });
    return false;
});

为什么我的HTML表单在jQuery-UI对话框中没有提交？

5 个答案: