DOM在加载功能后不响应jquery evers [英] DOM not responding to jquery evers after load function

问题描述

我有一个简单的页面动态加载内容。
我使用jQuery加载函数将内容附加到div。加载功能从另一个文件加载内容。
我遇到的问题是，内容加载后，我已经构建的jQuery函数没有响应点击事件。

为了证明它的工作原理，我包括内容，DOM加载后它的工作原理完美。

解决方案

当你这样做：

  $（selector）。click（function（）{...}）; 
  

...只有DOM中的元素才会匹配由选择器和他们的点击事件挂钩;如果稍后添加元素将与选择器相匹配，则它们将不会被自动挂起。

您可以使用事件委托使用 委托 自动挂起它们或（具有较新版本的jQuery） 之一 variant：

  $（container_for_elements）。delegate（selector，click，function（） ..}））; 
 $（container_for_elements）。on（click，selector，function（）{...}））; 
  

（请注意，参数的顺序在两者之间略有不同。）

使用事件委托，真正发生的是jQuery钩子点击容器上的，当点击泡泡直到容器，它检查事件所需的路径，以查看其中的任何元素是否匹配选择器。如果是这样，它会触发处理程序，就像您将其连接到元素一样，即使它实际上挂在容器上。

具体示例：

 < div id =container> 
< span> One< / span> 
< span> Two< / span> 
< span> Three< / span> 
< / div> 
  

如果我们这样做：

  $（＃container）。delegate（span，click，function（）{
 console.log（$（this）.text（））; 
}）; 
  

...然后点击其中一个跨度将显示其内容，如果我们这样做： / p>

  $（＃container）。append（< span> Four< / span>）; 
  

...该span将自动处理，因为事件处理程序位于容器然后选择器检查事件发生的时间，所以稍后添加元素并不重要。

I have a simple page that loads content dynamically. I use the jQuery load function to append content to a div. The load function loads content from another file. The problem I am having is that after the content loads, the jQuery functions I have built are not responding to click events.

To prove that it works otherwise, I include the content and after DOM loads it works perfectly. Need help please.

解决方案

When you do something like this:

$("selector").click(function() { ... });

...only elements that are already in the DOM will be matched by the selector and have their click event hooked up; if you add elements later that would have matched the selector, they will not be automatically hooked up after-the-fact.

You can use event delegation to seemingly hook them up automatically using delegate or (with newer versions of jQuery) one of the on variants:

$("container_for_elements").delegate("selector", "click", function() { ... }));
$("container_for_elements").on("click", "selector", function() { ... }));

(Note that the order of arguments is slightly different between the two.)

With event delegation, what really happens is that jQuery hooks click on the container, and when the click bubbles up to the container, it checks the path the event took to see if any of the elements in-between matched the selector. If so, it fires the handler as though you'd hooked it to the element, even though it's actually hooked on the container.

Concrete example:

<div id="container">
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
</div>

If we do this:

$("#container").delegate("span", "click", function() {
    console.log($(this).text());
});

...then clicking one of the spans will show its contents, and if we do this:

$("#container").append("<span>Four</span>");

...that span will get handled automatically, because the event handler is on the container and then the selector checked when the event occurs, so it doesn't matter that we added the element later.

这篇关于DOM在加载功能后不响应jquery evers的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！