Question

我正在使用jQuery在onClick上设置数据属性filtername，该工作正常。

$('#tag-group ul').append('<li><i class="fa fa-times" aria-hidden="true" data-filtergroup="'+filterGroup+'" data-filtername="'+filterName+'"></i>'+text+'</li>');

它在屏幕上显示为

<li><i class="fa fa-times" aria-hidden="true" data-filtergroup="location" data-filtername="Melbourne"></i> Melbourne</li>

然后我试图在另一个onClick上再次拿起它，但它会以未定义的形式返回。当我console log $(this).text();它工作但我控制日志$(this).data('filtername');时，它是未定义的。如果dom是由jQuery生成的，dom是否会隐藏它？

$(document).on('click','#sau-filter-tags ul li', function(event){
            var text = $(this).text();
            var filterName = $(this).data('filtername');
            console.log(filterName);  //Undefined
        });

Answer 1

filtername是li中i标记的属性。

您需要选择i代码：

$(document).on('click', '#sau-filter-tags ul li i', function(event) {
  var text = $(this).text();
  var filterName = $(this).data('filtername');
  console.log(filterName); //Undefined
});

或者您需要将事件附加到li并在this中找到我，例如：

$(this).find('i').data('filtername')

Answer 2

您要定位i代码上的数据属性。所以你必须在i

上创建一个事件

$(document).on('click','#sau-filter-tags ul li i', function(event){
    var text = $(this).text();
    var filterName = $(this).data('filtername');
    console.log(filterName);  //Undefined
});

Answer 3

您正在访问包含<li>而不是<i>内部的属性。请尝试以下方法：

＆＃13;

$('#sau-filter-tags li').on('click', function () {
    var i = $(this.firstElementChild)
    var text = i.text()
    var filterName = i.data('filtername')
    console.log(filterName) //=> 'Melbourne'
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li><i class="fa fa-times" aria-hidden="true" data-filtergroup="location" data-filtername="Melbourne"></i> Melbourne</li>

＆＃13;

数据属性返回undefined

3 个答案: