对动态加载的内容使用.on(）时，是否可以从元素中获取属性

Is it possible to get an attribute from an element when using .on() for dynamically loaded content?

本文关键字：是否 元素 属性 获取 加载 动态 on      更新时间：2023-09-26

在我为某人构建的网站上，我让大多数内部链接使用pushState，因为这是一种更快的用户体验。我在从动态加载的锚<a>元素获取href属性时遇到问题。人们总是告诉我使用.on()而不是.live()，因为.live()已被弃用，但后来我遇到了这样的问题。

这是我的代码：

$('#artists').on('click', '.artist a', function(e) {
        SM.config.loader.show();
        var href = $(this).attr('href');
        SM.loadContent(href,'artist');
        history.pushState('', 'New URL: ' + href, href);
        e.preventDefault();
});

没有返回href属性（显然），因此URL没有更改。

基本上，我的问题是如何从on事件的第二个参数中的元素获得href属性

此代码适用于我：http://jsfiddle.net/NcZ22/2/

HTML

<div id="artists"></div>​

JS

//Bind an event
$('#artists').on('click', '.artist', function(e) {
        e.preventDefault();    
        var href = $(this).attr('href');
        console.log(href);
});​
//Add the element to the dom
$('<a />', {
    href: 'http://stackoverflow.com',
    text: 'SO',
    class: 'artist'
}).appendTo('#artists');

此外，请确保您使用的是jQuery 1.7+。您可以在此处阅读更多关于.on与.delegate的信息http://api.jquery.com/delegate/

语法的简单比较：

$(selector).live(events, data, handler);                // jQuery 1.3+
$(elements).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(elements).on(events, selector, data, handler);        // jQuery 1.7+
相关文章：