jquery - 无法获取父级父级的 jquery data()。只返回未定义

Question

列表：

<ul class="div_chart1" data-quickcode="mac" data-questionid="1" >
    <li>
       <img src="inmark/pie_icon.jpg" class="pie_icon" onclick="ok()"/>
    </li>
</ul>

功能：

function ok(){          
    console.log($(this).parent().parent().data('quickcode'));
    console.log($(this).parent().parent().data('questionid'));  
}

函数 ok() 返回未定义。这有什么问题？

Answer 1

尝试将this引用作为参数传递给内联处理程序，

HTML：

<img src="inmark/pie_icon.jpg" class="pie_icon" onclick="ok(this)"/>

JS：

function ok(elem){          
    console.log($(elem).closest('ul').data('quickcode'));
    console.log($(elem).closest('ul').data('questionid'));  
}

演示

---

最好的方法是，

$('.pie_icon').click(function(e){
  e.stopPropagation();
  var parent = $(this).closest('ul');
  console.log(parent.data('quickcode'));
  console.log(parent.data('questionid'));  
});

Answer 2

this在您的上下文中是指全局窗口对象。

console.log(this); // Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

所以像这样传递元素对象，

<img src="inmark/pie_icon.jpg" class="pie_icon" onclick="ok(this)"/>  


function ok(element) {
    console.log($(element).parent().parent().data('quickcode'));
    console.log($(element).parent().parent().data('questionid'));
} // here is element is HTML element object. Just wrap it with jQuery to use jQuery function.

有关内联事件处理程序的更多信息