Question

我有2页

index.php
的login.php

从index.php进行ajax调用并获取login.php

的index.php：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Home Page</title>
    <script src="./js/jquery.js"></script>
        <script>
        $(document).ready(function(e) {
            $("a").click(function(e) {
                var model= $.ajax({
                    url: $(this).attr('href'),
                    cache:false,
                    type: "GET",
                    dataType:"json"
                });
                model.done(function(data){
                    $("#body").html(data.bodyy);
                    e.preventDefault();
                });
            });     
                $("form").submit(function(e) {
                            alert("Triggered");
                });
        });

    </script>



    <body>
    <div id="body"><a href="login.php">Login</a>
    </div>
</body>
</html>

这是ajax页面：login.php

<?php
    $body='<form class="form-signin" action="#" method="post" id="login">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input type="text" class="input-block-level" placeholder="username" name="username">
        <input type="password" id="password" class="input-block-level" placeholder="Password" name="password">
        <label class="checkbox">
          <input type="checkbox" value="remember-me"> Remember me
        </label>
        <table><th>
        <button class="btn btn-large btn-primary" type="submit">Sign in</button> </th><th width="5%">
        <h3>  or  </h3></th><th>
         <a class="btn btn-large btn-primary" href="./registration.php" >Register</a></th></table>
      </form>
      <script>
        </script>
';
    $data= array(
        'bodyy' => $body,
        );
        echo json_encode($data);
?>

当我提交登录表单时$("form").submit(function(e)未调用。当我从ajax加载的页面调用它时，我遇到了这个问题

Answer 1

这是因为你在jQuery执行时绑定了表单。对于“延迟”事件绑定（意味着您要绑定到所有表单而不仅仅是绑定时页面上的那些），您必须绑定到父元素，然后指定用于触发处理程序的子选择器，例如：

$("body").on("click", "form", function(e) {});

这将绑定body上的click，但只在单击body的子表单时触发处理程序（如果你的表单中有不应该执行此操作的表单，则使用更具体的父元素会很有用）

在jQuery中绑定事件时，请确保在执行绑定时仅绑定到页面上存在的元素，否则会破坏事件绑定。旁注，如果您需要在不破坏绑定事件的情况下“移动”元素，则应使用jQuery的detach函数而不是remove。 detach函数从页面中删除元素，但保留了它的事件绑定信息，允许您将其放在其他位置而不更新事件函数（或处理引用的处理）。

如何从ajax加载的页面调用用户定义的jquery函数

1 个答案: