javascript - jQuery 点击事件为空

Question

我正在尝试读取 JavaScript 函数中的一个属性，因此我可以通过 AJAX 使用此属性进一步调用 DELETE，但我已经无法通过随机检索属性了。 (使用的 jQuery 版本是 3.2.1)

启动该链的“按钮”(也已经在不使用 href 和使用 href="#" 的情况下尝试过):

更新:由于它作为评论出现，我确实在a-标签中包含了一些内容

<a class="btn btn-light delete-record" href="" data-id="5c25f547d42" title="Delete">
    <i class="fa fa-trash"></i>
</a>

我的 JavaScript:

$(document).ready(function(){
    $('.delete-record').on('click', function(e){
        $target = $(e.target);
        var id = $target.attr('data-id');
        if(confirm('Entry with ID ' + id){
           //AJAX
        }
    });
});

在确认测试过程中，我发现我的 ID有时设置为未定义。遗憾的是我不知道这是如何工作的，有时会向我显示 ID，有时则不会。

有没有一种解决方案可以让每次点击都起作用，而不仅仅是 42 次点击中的 24 次？

Answer 1

问题是，当您单击超链接内的图标时，事件会冒泡到单击处理程序。在点击处理程序中，event.target 将引用 icon 元素，该元素没有 data-id 属性。

所以解决方案是:

1) 将单击事件移动到图标上，然后确保超链接没有任何填充或其他 CSS 样式，这些样式会导致 <a>可点击，无需点击 <i> .

2) 或者检查事件内单击了哪个节点:

    var $target = $(e.target);
    var id = $target.prop('tagName') === 'I'
        ? $target.parent().attr('data-id')
        : $target.attr('data-id');
    if (!id ) {
        console.error( $target );
        throw new Error( 'cannot find the correct id for target' );
    }
    else {
        var is_correct_id = confirm( 'Entry with ID ' + id );
        if ( is_correct_id ) {
            //createAjaxCall( 'DELETE', 'somePath', id );
        }
    }

还有其他方法可以找到正确的父元素，以防有一天您更改结构并且图标不再是超链接的直接子元素。但我不再使用 JQuery，因此我将继续搜索 .findParent( 'a[data-id]' ) 的正确语法。由实现者决定。

3) 或者如您演示的那样，将 id 复制到图标上。 :)