首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jquery .load未应用就绪函数

jquery .load未应用就绪函数
EN

Stack Overflow用户
提问于 2010-03-16 20:40:31
回答 3查看 739关注 0票数 2

在文档就绪时,我运行以下代码:

代码语言:javascript
运行
AI代码解释
复制
 jQuery(document).ready(function(){  
        jQuery('#button').click(function() {
            jQuery('#contact_form').load("/Users/mge/Downloads/jquery-ajax-1/readme.txt");
            return false;
        });
    });

然后如果我创建一个像这样的表单

代码语言:javascript
运行
AI代码解释
复制
<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一样,只是运行一个post。

代码语言:javascript
运行
AI代码解释
复制
jQuery('#contact_form').load("/dynamicform.php");

为了将ready函数应用于.load(),是否必须对其执行某些操作?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2010-03-16 20:41:58

像这样使用.live()

代码语言:javascript
运行
AI代码解释
复制
 jQuery(document).ready(function(){  
    jQuery('#button').live('click', function() {
        jQuery('#contact_form').load("/Users/mge/Downloads/jquery-ajax-1/readme.txt");
        return false;
    });
});

当您添加处理程序时,元素不在那里。您需要在所有cases...this中侦听单击,.live()是用于侦听单击的DOM根,而.click()没有附加任何内容,因为当您调用选择器时,没有与选择器匹配的元素。live()稍后会监听匹配元素上的点击。

票数 3
EN

Stack Overflow用户

发布于 2010-03-16 20:50:23

.ready事件是在准备使用DOM时调用的,因此在动态加载和插入已经存在的DOM时不会调用该事件。

此外,我认为让自定义表单提交工作的常见做法是将事件处理程序附加到表单,而不是提交按钮。因为它还将处理用户以另一种方式提交表单而不是单击submit按钮的情况。示例:

代码语言:javascript
运行
AI代码解释
复制
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)

票数 0
EN

Stack Overflow用户

发布于 2010-03-16 20:43:15

load()之后不应用ready()。查看load()的文档,您可能可以指定一个在加载完成时执行的回调,在该回调中您将能够重新分配单击处理程序。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2457952

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文