2

我有一个文件：

<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;
});

在此之前它工作得很好，并加载了关于页面。

关于页面带来了另一个按钮，也称为“路由”：

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

但是，当我点击它时没有任何反应，而且我也没有收到 console.log 消息，所以似乎第一次在 div-content 中加载的页面看不到名为 route 的父函数，这是否按预期工作?

我该怎么做？

4

1 回答 1

0

您可以通过使用事件委托来做到这一点，.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;
});

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

于 2013-05-11T03:18:55.243 回答