Question

我对此感到困惑。我不能让这个工作。第一个块将显示登录表单，但不会捕获提交事件：

function appInit() {
    $.post(clubapp,function(d){
        if ( d == "failure:nolog" ) { $("#shell").html(loginform); }
    });
}

appInit();

$("#loginform").submit(function(e){
    alert("x"); // Does not alert
});

但是如果登录表单是在$ .post之外创建的，它会按预期工作。

function appInit() {
    $.post(clubapp,function(d){
        if ( d == "failure:nolog" ) { j = 1; }
    });
    if ( j == 1 ) { $("#shell").html(loginform); }
}

appInit();

$("#loginform").submit(function(e){
    alert("x"); // catches and alerts "x"
});

这似乎是一种非常不优雅的解决方法，并且想知道为什么它不会在后期行动中起作用。

编辑：我错误地说第二个有效。我删除了调试代码以询问问题，但是在“if（j == 1）”之前和之后显示j的值的一对警报导致这种方式以某种方式工作。删除这些警报使其失败。

Answer 1

使用委派的提交事件是将事件处理程序绑定到将来事件的最佳方法。添加动态内容后，您不必担心要记住触发代码。

$(function() {
    $(document).on("submit", "#loginform", function(e){
        alert("x"); // catches and alerts "x"
    });
});

这样做的好处是它既适用于现有元素，也适用于未来（尚未添加）元素。

Answer 2

它不起作用，因为在第一种情况下你创建了html表单之后设置了事件监听器，所以当你尝试设置监听器时还没有表单。当ajax请求完成时，$ .post的回调函数会触发，并且在你尝试设置监听器之后会定义它。

只需将您的侦听器置于相同的回调函数中即可正常工作：

function appInit() {
$.post(clubapp,function(d){
    if ( d == "failure:nolog" ) { 
       $("#shell").html(loginform); 

        //listener
       $("#loginform").submit(function(e){
         alert("x"); // Will alert
      });
    }
});
}

在jquery中动态创建表单提交问题

2 个答案: