javascript - 为什么我的 event.target 数据在 chrome 中不起作用？

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