jQuery无法将事件处理程序附加到.load </form>创建的<form>

时间:2013-02-12 00:22:11

标签: javascript jquery ajax

第一次问题...... 我页面上的这个链接

<a onclick="$('#mainbody').load('pages/login.php', tester());">Login</a>

生成此表单

<form id="form">
    <b>Email Address:</b> <input type="email" name="usrEmail" placeholder="email address" required><br />
    <b>Password:</b> <input type="password" name="usrPass" placeholder="password" required><br />
    <input type="submit" value="Log in">
</form>

我的.js包含了这个;

function tester(){
    $("#form").submit(function() {
        alert('Handler called.');
        return false;
    }); 
}

...提交表单时没有任何反应。 但是,如果我将链接更改为

<a onclick="$('#mainbody').load('pages/login.php', function(){$( '#form' ).submit(function() { alert('Handler called.'); return false;});});">Login</a>

......这完美无缺。 在功能上我看不出在调用命名函数或在回调本身中定义之间有什么区别,但显然浏览器可以! 我究竟做错了什么?是语法吗?定时? 或者 - 我仍然使用jQuery找到自己的方式 - 是因为即使我调用了一个引用#form的事件处理程序,它存在之后,首先创建函数的事实会忽略它吗?

3 个答案:

答案 0 :(得分:4)

您将调用tester函数的结果绑定为.load的回调(什么都不是)。这样做:

$("#mainbody").load('pages/login.php', tester);

即,使用函数 name 作为回调。

答案 1 :(得分:0)

  

是因为即使我正在调用一个引用#form AFTER它的事件处理程序

是。您应该查看jQuery委托方法。

如果你说

$("body").delegate("form","submit",function(){
    alert("handeled");
});

从不同来源加载后,它将起作用。

答案 2 :(得分:0)

由于表单元素不在初始DOM中,您需要

  • 在回调时重新连接它,在加载回调时调用你的函数

  • 或让它回应这些变化

    $(“#form”)。die('submit')。live('submit',function(){     alert('Handler called。');     返回false; });

请注意,我删除了该功能