0

我有 2 页

  • 索引.php
  • 登录.php

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

索引.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 加载页面调用它时，我遇到了这个问题

4

1 回答 1

0

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

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

这将绑定单击主体，但仅在单击主体的子表单时触发处理程序（如果主体中有不应执行此操作的表单，则使用更具体的父元素可能会有所帮助）。

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

于 2013-04-18T20:34:22.220 回答