Question

在准备好文档时，我运行以下代码：

 jQuery(document).ready(function(){  
        jQuery('#button').click(function() {
            jQuery('#contact_form').load("/Users/mge/Downloads/jquery-ajax-1/readme.txt");
            return false;
        });
    });

然后，如果我创建一个像

这样的表单

<div id="contact_form">
  <form name="contact" method="post" action="">
    <fieldset>
      <label for="name" id="name_label">Name</label>
      <input type="text" name="name" id="name" size="30" value="" class="text-input" />

      <label for="email" id="email_label">Return Email</label>
      <input type="text" name="email" id="email" size="30" value="" class="text-input" />

      <label for="phone" id="phone_label">Return Phone</label>
      <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />

        <br />
      <input type="submit" name="submit" class="button" id="button" value="Send" />
    </fieldset>
  </form>
</div>

一切正常。但是，如果我在实际应用程序中模仿我想要的行为（在document.ready已经执行之后动态加载表单.jquery #button操作不会被调用，表单就好像没有javascript而只是运行一个帖子。

jQuery('#contact_form').load("/dynamicform.php");

是否需要对.load（）执行某些操作才能将ready函数应用于它？

Answer 1

像这样使用.live()：

 jQuery(document).ready(function(){  
    jQuery('#button').live('click', function() {
        jQuery('#contact_form').load("/Users/mge/Downloads/jquery-ajax-1/readme.txt");
        return false;
    });
});

当您添加处理程序时，您的元素不存在。在所有情况下你都需要监听点击...这就是.live()的用途，是在DOM根目录上进行点击，而.click()没有附加到任何东西，因为那里在调用它时，没有与选择器匹配的元素。 live()稍后会听取匹配元素的点击次数。

Answer 2

当DOM准备好使用时会调用.ready事件，因此当您动态加载并将某些内容插入到现有DOM中时，将不会调用它。

此外，我认为通常通过将事件处理程序附加到表单而不是提交按钮来使自定义表单提交工作。因为它还将处理用户以另一种方式提交表单而不是单击提交按钮的情况。例如：

jQuery("#contact_form form").submit(function (event) {
    event.preventDefault();
    // Do your stuff...
})

（event.preventDefault（）：http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29）

Answer 3

ready()后未应用

load()。查看load()的文档，您可以指定在加载完成时执行的回调，您可以在其中重新分配点击处理程序。

jquery .load没有应用就绪函数

3 个答案: