如果/否则不适用于 event.target 选择器

Question

我有三个按钮。点击一个应该做一件事，点击第二个应该做另一件事，等等。

当您单击任何按钮时，我会在控制台中看到相同的消息，这是我不想要的。我的 if/else 逻辑是否有问题或是否有其他因素影响结果？

index.js:

$(document).on("click", ".dtAddClass-rolesgrid", disp._newRole);

$(document).on("click", ".dtAddClass-srchgrid", disp._newRole);

$(document).on("click", ".dtAddClass-additionalsrchgrid", disp._newRole);

JS sn-p:

_newRole(e) {
    $("#dialog-form fieldset > #activate-button").hide();
    $("#dialog-form fieldset > #deactivate-button").hide();
    dialog.dialog({ title: "Add New Search/Role Filled" });
    dialog.dialog("open");

    if ($(e.target.tagName === ".dtAddClass-rolesgrid")) {
        myClass._AddNewRoleFilled();
        console.log('this is rolesgrid') // clicking on any of the buttons only shows this message
    } else if ($(e.target.tagName === ".dtAddClass-srchgrid")) {
        console.log('this is srchgrid');
    } else if ($(e.target.tagName === ".dtAddClass-additionalsrchgrid")) {
        console.log('this is addtsrchgrid');
    } else {
        console.log('this is e: ' + e)
    }
}   

按钮是如何创建的：

let _gridNew = _grid.substring(1);
var table = $(_grid).DataTable({
    buttons: [
    {
        text:      '<i class="fa fa-plus"></i>',
        titleAttr: 'Add',
        className: 'dtAddClass-' + _gridNew
    },

---

更新代码：

if ($('div').hasClass("dtAddClass-rolesgrid")) {
    myClass._AddNewRoleFilled();
    console.log('this is rolesgrid');
} else if ($('div').hasClass("dtAddClass-srchgrid")) {
    console.log('this is srchgrid');
} else if ($('div').hasClass("dtAddClass-additionalsrchgrid")) {
    console.log('this is addtsrchgrid');
} else {
    console.log('this is e: ' + e)
}   

Answer 1

来，试试这样的。

$(document).on("click", ".dtAddClass-rolesgrid", onClick);
$(document).on("click", ".dtAddClass-srchgrid", onClick);
$(document).on("click", ".dtAddClass-additionalsrchgrid", onClick);

function onClick(e) {
  const el = $(this);
  if (el.hasClass('dtAddClass-rolesgrid')) {
    console.log('this is rolesgrid')
  } else if (el.hasClass('dtAddClass-srchgrid')) {
    console.log('this is srchgrid');
  } else if (el.hasClass('dtAddClass-additionalsrchgrid')) {
    console.log('this is addtsrchgrid');
  } else {
    console.log('this is e: ' + this)
  }
}

在 jQuery click 函数中，您使用$(this) 而不是e.target 获得您点击的元素。另外，使用jQuery方法hasClass，tagName是元素的标签名，如div或span。

或者让事情变得更简单：

$('.dtAddClass-rolesgrid').click(function() {
  alert('this is rolesgrid')
})

$('.dtAddClass-srchgrid').click(function() {
  alert('this is srchgrid')
})

$('.dtAddClass-additionalsrchgrid').click(function() {
  alert('this is additionalsrchgrid')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dtAddClass-rolesgrid">
  Rolesgrid
</div>

<div class="dtAddClass-srchgrid">
  Srchgrid
</div>

<div class="dtAddClass-additionalsrchgrid">
  Additionalsrchgrid
</div>