jQuery on load not firing(不是Ajax)

时间:2014-03-11 21:17:50

标签: javascript jquery

首先,让我明确一点,我并没有尝试在Ajax上下文中使用load()来加载远程资源。

我只是试图将一个函数绑定到一个在页面加载时不存在的对象,这样我就可以在它出现时对它进行处理。 我正在使用jQuery 1.7

我有一个带有class =“contact-form”的表单。 此表单是即时创建的,因此在document.ready()触发时不存在。

我想要做的是在创建表单时发生一些事情。 据推测,当事物可用时,应该有“加载”或“准备好”或某些此类事件被触发。 在以前版本的jQuery中,我使用了delegate()或live();但是这些已被弃用,并且当前的文档说使用on(“load”,handler)或其快捷方式load()。 我是从https://api.jquery.com/load-event/得到的。

到目前为止,以下所有方法都无效:

 $(".contact-form").load(function(){
    console.log("Hi there!");
  }); 

 $(".contact-form").on("load", function(){
    console.log("Hi there!");
  }); 

并且,基于来自Jquery event handler not working on dynamic content的想法的欢呼声,

 $(document.body).on("load", ".contact-form", function(){
    console.log("Hi there!");
  });      

任何指示赞赏。

3 个答案:

答案 0 :(得分:0)

为什么你需要一个活动?如果动态添加表单,则运行当时需要的内容

var form = '<form class="contact-form"></form>';
$('body').append(form);
console.log("Hi there!");

答案 1 :(得分:0)

此方法是.on(&#34; load&#34;,handler)的快捷方式。

当加载事件和所有子元素已完全加载时,会将事件发送到元素。此事件可以发送到与URL关联的任何元素:图像,脚本,框架,iframe和窗口对象。

例如,考虑一个包含简单图像的页面:

<img src="book.png" alt="Book" id="book">

事件处理程序可以绑定到图像:

$( "#book" ).load(function() {
  // Handler for .load() called.
});

一旦加载了图像,就会调用处理程序。

现在把它放在一个准备好的处理程序

$( document ).ready(function() {
  // onload functions here
});

答案 2 :(得分:0)

如果您使用.load()这是.on('load')的{​​{1}}的快捷方式,那么匹配元素(在这种情况下为load event)必须在页面时存在加载。 jQuery&lt; 1.7有一个form函数可以监听动态添加到页面的新元素,但是由于各种原因它在jQuery 1.7中删除了,性能是主要的。

其他选项

jQuery LiveQuery是一个插件,听起来它会完全符合您的要求。 https://github.com/brandonaaron/livequery

jQuery Entwine将使用livequery监视新的DOM元素,但也允许您创建DOM元素并将它们用作定义自己的方法的完整对象。 https://github.com/hafriedlander/jquery.entwine

来自jQuery的.on()docs

的更多信息

您可以使用.live()创建一个点击处理程序,当元素动态添加到原始选择器(通常是容器)时会触发,例如:

Delegated events

现在,当动态添加新$( "#dataTable tbody" ).on( "click", "tr", function() { alert( $( this ).text() ); }); 时,它将绑定<tr>处理程序。但是,没有事件可以将元素实际加载到DOM中。

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on()时的页面上。要确保元素存在且可以选择,请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新HTML注入页面,请在将新HTML放入页面后选择元素并附加事件处理程序。或者,使用委托事件来附加事件处理程序,如下所述。

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素,您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如,此元素可以是模型 - 视图 - 控制器设计中视图的容器元素,如果事件处理程序想要监视文档中的所有冒泡事件,则可以是文档。在加载任何其他HTML之前,文档元素在文档的头部可用,因此可以安全地将事件附加到那里而无需等待文档准备就绪。