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

Question

I have 2 pages 我有2页

index.php index.php
login.php login.php

From the index.php make a ajax call and get the login.php 从index.php进行ajax调用并获取login.php

index.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>

and here is the ajax page: login.php 这是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);
?>

when i submit login form the $("form").submit(function(e) not called. i get this problem when i call this from ajax loaded page 当我提交登录表单$("form").submit(function(e)没有调用。当我从ajax加载页面调用此$("form").submit(function(e)时，出现此问题

Answer 1

This is becuase you are binding to forms at the time the jQuery is executed. 这是因为您在执行jQuery时绑定到表单。 For "delayed" event binding (meaning you want to bind to all forms and not just the ones on the page at the time you do the binding) you must bind to a parent element, and then specify a child selector to fire the handler for, such as: 对于“延迟”事件绑定（意味着您想绑定到所有表单，而不仅仅是绑定时的页面上的表单），必须绑定到父元素，然后指定子选择器来触发处理程序，如：

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

This will bind the click on body, but only fire the handler when a form that is a child of body is clicked (using more specific parent elements can be beneficial if you have forms in the body that should not do this action). 这将绑定单击主体，但仅在单击作为主体子项的表单时才触发处理程序（如果主体中有不应该执行此操作的表单，则使用更具体的父元素会很有用）。

When binding events in jQuery, make sure that you are only binding to elements that are present on the page when you perform the bind otherwise it will break the event binding. 在jQuery中绑定事件时，请确保在执行绑定时仅绑定到页面上存在的元素，否则它将中断事件绑定。 Side note, should you need to "move" elements around without breaking their bound events you should use jQuery's detach function instead of remove . 旁注，如果您需要“移动”元素而不破坏绑定事件，则应使用jQuery的detach函数而不是remove 。 The detach function removes the element from the page but keeps the event binding information for it allowing you to place it elsewhere without updating event functions (or handling disposing of references). detach函数从页面上删除该元素，但保留事件绑定信息，使您可以将其放置在其他位置，而无需更新事件函数（或处理引用的处置）。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-04-18 20:34:22

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-04-18 20:34:22

解决方案1
0 已采纳 2013-04-18 20:34:22