Question

此问题的TL / DR是：如果使用事件委托，是否总是必须将其绑定到页面加载时DOM中存在的元素？我们可以绑定到ajax响应中返回的选择器吗？

我正在使用jquery 3.2.1，并一直在阅读有关事件委托的信息：http://learn.jquery.com/events/event-delegation/

使用示例标记：

<ul id="list">
    <li><a href="http://domain1.com">Item #1</a></li>
    <li><a href="/local/path/1">Item #2</a></li>
    <li><a href="/local/path/2">Item #3</a></li>
    <li><a href="http://domain4.com">Item #4</a></li>
</ul>

我了解他们的意思是，如果我们使用js将第5个项目添加到#list，则以下内容仅对第1-4个项目有效，因为当{{1 }}被调用，因此没有获取事件处理程序：

.on

所以给出的解决方案是使用这样的委托事件处理程序：

$( "#list a" ).on( "click", function( event ) {
});

在这两种情况下，他们都将$( "#list" ).on( "click", "a", function( event ) { });定位为目标，因为这是在页面加载中。

在我的应用程序中，我正在发出一个ajax请求，该请求将返回开始时给定的整个标记块的等效内容（即包括#list的所有内容），并将其附加到具有以下内容的Bootstrap 3.3.7模态窗口中：类别为#list的默认区域内#notifierModal的ID：

.modal-body

我在页面加载中显示了这个信息

$.ajax({
    url: $(this).attr('href'),
    method: 'get'
}).done(function(response) {
    $('.modal-body').html(response);
    $('#notifierModal').modal('show');
});

此无效 –大概是因为$( "#list" ).on( "click", "a", function( event ) { console.log('something inside #list was clicked'); });在页面加载时不存在，因为它是在ajax请求完成后附加到#list上的。

此可以起作用-可能是因为页面加载中出现了.modal-body：

.modal-body

所以我的问题是2折：

如果我们使用事件委托，是否总是必须在页面加载时将其绑定到DOM中存在的元素？是否有可能针对ajax响应中返回的选择器？
这是我的应用程序中出现问题的原因，是因为我在$( ".modal-body" ).on( "click", "a", function( event ) { console.log('something inside .modal-body was clicked'); });内还有其他锚标记，但我不想由我的js中的.modal-body事件处理。这样看来不可能在click内定位锚点吗？我怎么写这样的js，使其只针对#list内部的锚点？

任何建议将不胜感激。

PS-我已经读过Event binding on dynamically created elements?，但这似乎解决了页面加载时存在的元素上的绑定。

Answer 1

是的，当您使用事件委托向容器添加处理程序时，该容器必须首先存在才能添加处理程序。

这里的解决方案是在library(tidyverse) dat %>% as.data.frame() %>% rowid_to_column("row") %>% gather(key, value, -row) %>% ggplot(aes(x = row, y = value, fill = key)) + geom_col() + geom_hline(data = dat %>% as.data.frame() %>% gather(key, value) %>% count(key) %>% mutate(y = 0), aes(yintercept = y, colour = key), show.legend = F) + facet_wrap(~ key, ncol = ncol(dat), strip.position = "bottom") + coord_flip() + guides(fill = FALSE) + theme_minimal() + theme( strip.text.x = element_text(angle = 45), axis.title = element_blank(), axis.text = element_blank(), axis.ticks = element_blank())上使用事件委托时提供更精确的选择器字符串-而不是选择任何.modal-body后代，而是使用选择器字符串a来确保触发侦听器的元素必须来自#list a：

#list

$( ".modal-body" ).on( "click", "#list a", function( event ) {
    event.preventDefault();
    console.log('something in the list was clicked');
});

function append() {
  $( ".modal-body" ).append(`
    <ul id="list">
      <li><a href="http://domain1.com">Item #1</a></li>
      <li><a href="/local/path/1">Item #2</a></li>
      <li><a href="/local/path/2">Item #3</a></li>
      <li><a href="http://domain4.com">Item #4</a></li>
    </ul>
  `);
}

setTimeout(append, 1500);

jQuery-从Ajax响应返回的选择器上的事件委托

1 个答案: