javascript - jquery-クリックすると要素の属性を取得します。要素には内部divが含まれているため、未定義のエラーが発生します

Question

私はこのようなhtmlコードを持っています：

<ul>
  <li k="5" id="l">
    <div>
        <div>
         Some Text
        </div>
    </div>   
  </li>
</ul> 

上記のコードから、 liタグ内にdivやspan、またはその他の要素がない場合、$（e.target）.attr（ "k"）は正しい値を返します。ただし、他の要素が含まれているため、要素をクリックすると、未定義の値が表示されます。解決策は何ですか？

Answer 1

これも機能します：

$(e.target).closest("li").attr("k");

Answer 2

jQueryclosest()を見てください-それは直接の親に依存していません。

Answer 3

これは、イベントのバブリングが原因で発生しています。イベントは実際には発生していませんがli、その子/子孫要素の1つで発生しています。kしたがって、実際には、ではなく、その属性を探していますli。

イベントバブリングの可能性がないため、子要素がない場合はこれは発生しません。イベントは常に。によってのみトリガーされますli。

これを回避する最も簡単な方法はthis、ではなくイベントコールバック内で使用することですevt.target。

$('li').on('click', function() {
    var k = $(this).attr('k');
});

Answer 4

私はこれを実行することによって正しい答えを得る：

 $(function(){
     $("li").click(function(){
        alert($(this).attr("k"));                
     });
 });​

Answer 5

属性は次の方法で取得できます

$(e.target).closest("li").attr("k");

Answer 6

これも試すことができます

$('li').('click', function() {
  var k = $(this).attr('k');
});