データ属性が未定義のまま返されています

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

それは私が、別のonClickで再びそれを拾うためにしようとしていますが、それが戻ってくるように未定義

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

としてOK画面上に描画します。私がconsole log $(this).text();のときは動作しますが、コンソールログ$(this).data('filtername');をコンソールに設定すると、定義されていません。それが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リーでiタグの属性です。あなたの上の属性にアクセスしている

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

Answer 2

：

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

か、李にイベントを添付し、thisにIを見つけ、例する必要があります：あなたはiタグを選択する必要が

内部には<i>ではなく<li>が含まれています。次のことを試してみてください。

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

<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>

Answer 3

あなたは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 
});