在文档就绪时,我运行以下代码:
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一样,只是运行一个post。
jQuery('#contact_form').load("/dynamicform.php");
为了将ready函数应用于.load(),是否必须对其执行某些操作?
发布于 2010-03-16 20:41:58
像这样使用.live()
:
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()
稍后会监听匹配元素上的点击。
发布于 2010-03-16 20:50:23
.ready事件是在准备使用DOM时调用的,因此在动态加载和插入已经存在的DOM时不会调用该事件。
此外,我认为让自定义表单提交工作的常见做法是将事件处理程序附加到表单,而不是提交按钮。因为它还将处理用户以另一种方式提交表单而不是单击submit按钮的情况。示例:
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)
发布于 2010-03-16 20:43:15
在load()
之后不应用ready()
。查看load()
的文档,您可能可以指定一个在加载完成时执行的回调,在该回调中您将能够重新分配单击处理程序。
https://stackoverflow.com/questions/2457952
复制相似问题