jQuery在加载时不触发(不是Ajax) [英] jQuery on load not firing (not Ajax)

问题描述

首先，请让我清楚，我不是要在Ajax上下文中使用load()来加载远程资源.

At the outset, let me be clear I'm not trying to use load() in an Ajax context to load a remote resource.

我只是想将一个函数绑定到页面加载时不存在的对象上，这样我可以在它出现时对其进行处理. 我正在使用jQuery 1.7

I'm just trying to bind a function to an object that doesn't exist at page load time, such that I can do stuff to it when it does appear. I'm using jQuery 1.7

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

I have a form with class="contact-form"). This form is created on the fly, so it doesn't exist when document.ready() fires.

我想做的是在创建表单时使某些事情发生. 大概应该有一个负载"或就绪"，或在事物可用时触发此类事件. 在jQuery的早期版本中，我会使用proxy()或live();.但是这些功能已被弃用，当前文档说要使用on("load"，handler)或它的快捷方式load(). 我是从 https://api.jquery.com/load-event/.

What I want to do is make some stuff happen when the form is created. Presumably there should be a "load" or "ready" or some such event fired when the thing is available. Under previous versions of jQuery I'd have used delegate() or live(); but these have been deprecated, and the current documentation says to use on( "load", handler ) or its shortcut, load(). I'm getting this from https://api.jquery.com/load-event/.

到目前为止，以下所有方法均无法正常工作:

All of the following have so far failed to work:

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

和

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

，然后在基于 Jquery事件的想法的雹灾中处理程序无法处理动态内容，

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

任何指针都表示赞赏.

推荐答案

如果使用.load()(这是.on('load')的快捷方式，称为load event)，则必须存在匹配的元素(在这种情况下为form)页面加载时的时间. jQuery< 1.7具有.live()函数，该函数可以侦听动态添加到页面中的新元素，但是由于各种原因，它在jQuery 1.7中已被删除，性能是主要原因.

If you use .load() which is a shortcut for .on('load') called the load event, the matching element (form in this case) must exist at the time the page was loaded. jQuery < 1.7 had a .live() function which would listen for new elements dynamically added to the page, but it was removed in jQuery 1.7 for various reasons, performance being a major one.

jQuery LiveQuery是一个插件，听起来像它会完全满足您的需求. https://github.com/brandonaaron/livequery

jQuery LiveQuery is a plugin that sounds like it will do exactly what you're looking for. https://github.com/brandonaaron/livequery

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

jQuery Entwine will watch for new DOM elements using livequery, but also allows you to create DOM elements and use them as full objects with their own methods defined. https://github.com/hafriedlander/jquery.entwine

您可以使用Delegated events创建一个点击处理程序，该处理程序将在元素动态添加到原始选择器(通常是一个容器)时触发，例如:

You can use Delegated events to create a click handler which will fire when an element is dynamically added to your original selector (typically a container), such as:

$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});

现在，当动态添加新的<tr>时，它将绑定click处理程序.但是，没有将元素实际加载到DOM中的事件.

Now, when a new <tr> is added dynamically, it will have the click handler bound to it. However, there is no event for the actual loading of an element into the DOM.

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

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

委派的事件的优势在于，它们可以处理以后在后代添加到文档中的后代元素中的事件.通过选择保证在附加委托事件处理程序时会出现的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要.例如，如果事件处理程序想要监视文档中的所有冒泡事件，则此元素可以是Model-View-Controller设计中视图的容器元素，也可以是文档.在加载任何其他HTML之前，文档元素位于文档的开头，因此可以在其中附加事件，而不必等待文档准备就绪.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

这篇关于jQuery在加载时不触发(不是Ajax)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！