Question

我有这个动态元素：

<ul>
    <li class="image1" data-sub="foo 1">
        <img src="http://placehold.it/50x50" alt="" />
    </li>
    <li class="image2" data-sub="foo 2">
        <img src="http://placehold.it/50x50" alt="" />
    </li>
</ul>

我正试图从此代码中获取class，data-sub和<img>。

JS：

$('body').on('click', 'li', function(i){
    rel = i.currentTarget.className;
    img = i.currentTarget.innerHTML;
    sub = $(this).attr('data-sub');

    console.log(rel, img, sub);
});

class和<img>正在返回，但data-sub返回未定义。我也试过了console.log( this.attr('data-sub') )，但它没有用。

当我使用console.log(i)时，它会返回对象，这就是我使用i.currentTarget的原因，但似乎没有在那里创建自定义数据属性。

一些帮助将不胜感激

Answer 1

改为使用它（HTML是相同的）：

$('body').on('click', 'li', function() {
    var rel = $(this).attr('class');
    var img = $(this).html();
    var sub = $(this).data('sub'); //CREDIT TO jrummell

    console.log(rel, img, sub);
});

小提琴：http://jsfiddle.net/edbdohf3/2/

我删除了i和i.currentTarget。您可以在任何地方使用$(this)来引用点击的li。（我相应地将.className和.innerHTML翻译成了jQuery。）
我将.attr('data-sub')更改为.data('sub')（归功于jrummell）。第一个似乎也有效，但后者显然是更好的方式。
我在函数中的每个变量之前添加了var。如果您只需要函数内部的那些变量，请使用var，否则您将不必要地创建全局变量。如果你还需要函数之外的变量，你显然需要全局变量，在这种情况下你不应该在函数内部的变量之前添加var。（但在这里，我不能看到你是否已经在脚本的早期声明了这些变量。）

如果仍然无效 ，请尝试更改

$('body').on('click', 'li', function() {
到
$('li').on('click', function() {

这会直接链接li元素，而不是通过body进行委派。这可确保$(this)毫无疑问地引用所点击的li元素从理论上讲，不应该有任何区别，但尝试它永远不会受到伤害。

如何从动态元素中获取属性？

1 个答案: