Question

这是关于jQuery的问题。

$(document).ready(function() {
    $('li a').click(function(e) {
        e.preventDefault();

        var link = $(this).attr('href');

        location.hash = link;

        $('#content').load(link);
    });
});

当我点击某个链接时，#content div会加载该页面，并且带有主题标签的名称会附加到该网址。

但是我希望jQuery加载的#content div中的每个页面都能做同样的事情。它仅适用于原始内容。

现在我有了这个：

$('#content a').click(function(e) {
    e.preventDefault();

    var link = $(this).attr('href');

    location.hash = link;
});

示例：

我将jate加载的donate.php加载到#content div中，当我点击donate.php上的链接时，它应该将新内容加载到#content div中。

但它不起作用。

Answer 1

答案是事件委托。由于#content元素本身未动态加载，并且您希望在其中定位a元素。委托#content元素可能是最有意义的。试试这个：

$('#content').on("click", "a", function(e) {
    e.preventDefault();
    var link = $(this).attr('href');
    location.hash = link;
    $('#content').load(link);
});

这样，即使动态添加了锚元素，它也能工作。您可以在.on() documentation上阅读有关该内容的更多信息，搜索委派活动。

为了进一步解释这一点，上述使用委托的解决方案基本上是说“如果#content内有点击，请检查点击是否在a元素内”。因此，无论该绑定是否存在a元素，这都将起作用。

这与$('#content a').click(function(e)或$('#content a').on("click", function(e)不同，后者都说“将点击处理程序绑定到#content a”，问题是它无法绑定到#content a在进行此绑定时不存在。

Answer 2

因为您在文档就绪事件完成后添加了链接。链接不会获得与它们关联的事件处理程序。要使您的链接正常工作，您需要将其与文档相关联，然后使用on()

$(document).on('click', '#content a', function (e) {
    e.preventDefault();
    var link = $(this).attr('href');
    location.hash = link;
}):

Answer 3

为此目的，我们有.on：

$(document).on("click", "#content a", function(e) {
    e.preventDefault();
    var link = $(this).attr('href');
    location.hash = link;
});

Answer 4

.on文档

$('#content').on("click", "a", function(e) {
    e.preventDefault();

    var link = $(this).attr('href');

    location.hash = link;
});

添加动态元素时，必须使用.on

为其编码

使元素中的所有链接将新内容加载到同一元素中

4 个答案: