Question

我有一份文件：

<button class="route" data-route-url="/about">About</button>
&nbsp;
<a href="#" class="route" data-route-url="/about">About</a>

<div id="page-content">
</div>

$('.route').click(function() {
    console.log('.route.click()');
    var url = $(this).data('route-url');
    $('#page-content').html('loading...');
    $.get(url, function(data) { $('#page-content').html(data); });
    return false;
});

在此之前它完美无缺，并加载了关于页面。

about页面带来另一个也称为“route”的按钮：

<button class="route" data-route-url="/contact">Contact</button>

但是，当我点击它没有任何反应时，我也没有得到console.log消息，所以似乎首先在div-content内部加载的页面看不到名为route的父函数，这是按预期工作？

我该怎么做才能做到这一点？

Answer 1

您可以使用 .on() 的事件委派来完成此操作，因为您的按钮是动态添加到DOM的，之前注册的事件不适用于新添加的按钮。所以你需要使用事件委托，即将事件附加到父容器（已经存在）或文档元素（正如我在代码中使用的那样）并设置一个具有类'.route'的元素的委托现在或将来随时可用。

$(document).on('click','.route' ,function() {
    console.log('.route.click()');
    var url = $(this).data('route-url');
    $('#page-content').html('loading...');
    $.get(url, function(data) { $('#page-content').html(data); });
    return false;
});

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型 - 视图 - 控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则该文档可以是文档。

加载的内容无法调用父级的功能

1 个答案: