且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

jQuery在加载时不触发(不是Ajax)

更新时间:2023-11-20 23:32:34

如果使用.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.