javascript - jQuery on-click事件为空

我正在尝试在JavaScript函数中读取一个属性，因此我可以进一步通过AJAX使用该属性调用DELETE，但我已经无法通过随机出现的方式来检索该属性。 （用于该版本的jQuery版本是3.2.1）

启动该链的“按钮”（也已经在没有href和href="#"的情况下尝试过）：

更新：由于它是作为注释出现的，所以我确实在a -tag中包含一些内容

<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有时设置为undefined。可悲的是，我不知道这有时是如何工作的，并向我显示ID，有时却不。

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

最佳答案

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

因此解决方案是：

1）将click事件移动到图标上，然后确保超链接没有任何填充或其他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复制到图标上。 :)

关于javascript - jQuery on-click事件为空，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53957588/