Question

我有一个功能可以删除我的表单中的字段，该字段适用于Firefox但不适用于Chrome。

function activeDelete(del) {
    $('[data-delete="' + del + '"]').click(function(event) {
        deleteField(event);
    });
}

function deleteField(event) {
    if ((members - 1) >= 3) {
        members -= 1;
        var i = $(event.target).data('delete');
        console.log(i)
        var currentdiv = $('[data-div="' + i + '"]');
        currentdiv.remove();
        $("#rollWheel").val("Roll the wheel ! (" + members + " members)");
    } else {
        $('.errors').remove();
        $('#firstCard').append('<div class="errors animated fadeOut">3 participants minimum.</div>');
    }


  }

activeDelete(1);

我记录了我的i变量，它是undefined（在Chrome中）。我在本地测试，也在我的网站上测试过。

我在这里失踪了什么？

Answer 1

您应该在此使用currentTarget而不是target，但我建议您使用$(this)。

最小变化：

  $(event.currentTarget).data('delete');

建议的更改：

function activeDelete(del) {
  $('[data-delete="' + del + '"]').click(function(event) {
    deleteField($(this)); // see here the parameter
    event.preventDefault();
  });
}

function deleteField(obj) {
  if ((members - 1) >= 3) {
    members -= 1;
    var i = obj.data('delete'); // see here the getter
    console.log(i)
    var currentdiv = $('[data-div="' + i + '"]');
    currentdiv.remove();
    $("#rollWheel").val("Roll the wheel ! (" + members + " members)");
  } else {
    $('.errors').remove();
    $('#firstCard').append('<div class="errors animated fadeOut">3 participants minimum.</div>');
  }


}

activeDelete(1);

Answer 2

将以下行从$(event.target)更改为$(event.currentTarget)。这是因为click事件可能已触发子元素。

根据doc：

在事件遍历时标识事件的当前目标 DOM。它总是引用事件处理程序的元素附加到而不是event.target，它标识元素事件发生了。

或者您也可以将自己的行改为$(event.target).closest("[data-delete]")。

为什么我的event.target数据无法在chrome中运行？

2 个答案:

最小变化：

建议的更改：