jQuery按一下事件为空

Question

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

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

UPDATE：因为它是作为评论出现的，所以在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，有时不知道。

是否有一个解决方案，使这个工作与每一次点击，而不仅仅是大约24的42？

Answer 1

问题是，当您单击超链接中的图标时，该事件会一直到单击处理程序。在单击处理程序中，event.target将引用图标元素，该元素没有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复制到图标上。:)

Answer 2

答案实际上是基于谢利对这个问题的评论。

由于我确实在我的a-tag中获得了另一个元素，因此目标是不同的，这取决于我单击链接/按钮的位置。为了解决这个问题，我简单地将ID附加到i-tag：

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

Answer 3

您是否尝试过使用href="javascript“，这也可能返回元素列表，因此尝试使用如下id将侦听器放置在

<a class="btn btn-light delete-record" id="deleteButton" href="" data-id="5c25f547d42" title="Delete">
$(document).ready(function(){
    $('#deleteButton').on('click', function(e){
        e.stopPropagation();
        $target = $(e.target);
        var id = $target.attr('data-id');
        if(confirm('Entry with ID ' + id){
           //AJAX
        }
    });
});