Question

在这个项目我正在努力我有按钮，里面有图像和造型用途......我正在尝试实现这样的功能，当点击按钮时我使用event.target.parentNode.parentNode ...多次从最顶层的父div获取HTML5数据属性（postid），在Firefox中我需要调用parentNode 4次并且它在Chrome中工作它不起作用我需要调用parentNode 5次，这意味着两次浏览器指的是不同的父母。我添加了$（event.target）.parent（）。parent（）。css（'border'，'5px solid black'）;找出每个浏览器正在考虑的目标。我发现Chrome认为event.target是图像（实际上是点击的），但Firefox认为该按钮是event.target（事件实际附加的地方）.....我怎样才能此按钮及其事件代码可在两个浏览器上移植，而无需删除按钮标记内的图像（有效）。

代码看起来像

$(document).on('click', '.opinion', function(event) {

  try {
    post_id =  event.target.parentNode.parentNode.parentNode.parentNode.dataset['postid'];
    //$(event.target).parent().parent().css('border','5px solid black');
    url = $('#opinionUrl' + post_id).val();
    token = $('#token').val();
  } catch (e) {

    alert(e);
  }
///Some more code to do stuff
});

<button class="icon opinion">
  <img class="icon" src="{{URL::asset('assets/icons/haha.png')}}">
</button>

Answer 1

为什么要使用jQuery和链parentNode或.parent()？

.closest()将为您完成https://api.jquery.com/closest/

的工作

post_id = $(this).closest("[data-postid]").data().postid;

event.target.parentNode ...指向chrome和firefox中的不同父项？

1 个答案: