jQuery on-click事件为空

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

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

Answer 1

答案实际上基于Shilly对问题的评论。

因为我确实有我在另一个元素a -标记，目标不同的地方我点击了链接/按钮是不同的。 作为一个简单的解决方法，我还简单地将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 2

问题是，当您单击超链接内的图标时，该事件会冒泡至单击处理程序。 然后，在点击处理程序内部，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复制到图标上。 :)

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

Answer 4

您应该将JS + HTML更改为此：

的HTML

<button class="btn btn-light delete-record"
        data-id="5c25f547d42"
        title="Delete">
    Click me!
</button>

使用<a>问题是您不会停止<a>标记的默认行为-这是一个链接。 只是刷新页面（如果您将href留空）。 将其更改为按钮要好得多，因为从原则上讲它是按钮。

jQuery的

jQuery(document).ready(function($)
{
    $('.delete-record').click(function()
    {
        let id = $(this).attr('data-id');
        if (confirm('Entry with ID '+ id)) {
            //whatever
        }
    });
})

您不需要获取目标，只需使用$(this)来获取被单击元素的数据属性。 然后照常进行脚本

Answer 5

您可以尝试将anchor标签的作用指定为button 。 然后，您不必担心指定href因为锚标记将被视为按钮。 https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/Roles/button_role

Answer 6

将event.preventDefault()用作回调函数中“单击”的第一行，否则您将被重定向到链接或只是重新加载。

Answer 7

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

或者你可以尝试

<a class="btn btn-light delete-record" id="btnDelete" href="javascript:DeleteRecord()"  title="Delete">
    <script>
    function DeleteRecord(){
    //Do your code here
    }

</script>

Answer 8

由于您正在跟踪点击，因此您应防止点击的默认行为，因此请执行以下操作：

$('.delete-record').on('click', function(e){
  e.preventDefault();
  (...)
});

您不需要使用目标，可以直接获取data属性。

如果您想使用普通的js方法：

 document.addEventListener("DOMContentLoaded", function () { //const records = document.querySelectorAll('.delete-record'); Array.from(document.querySelectorAll('.delete-record')).forEach(elem =>{ elem.addEventListener('click', function(e){ //don't do the default link behaviour e.preventDefault(); const id = this.dataset.id; console.log('Entry with ID :' + id); //use your jquery here }); }) }); 

 <a class="btn btn-light delete-record" href="" data-id="5c215f547d42" title="Delete">link1</a> <a class="btn btn-light delete-record" href="" data-id="eeee5c1125f547d42" title="Delete">link2</a> <a class="btn btn-light delete-record" href="" data-id="cccc5c25f431547d42" title="Delete">link3</a> <a class="btn btn-light delete-record" href="" data-id="bbbbb5c2345f547d42" title="Delete">link4</a> <a class="btn btn-light delete-record" href="" data-id="111115c25f547d42" title="Delete">link5</a> 

就个人而言，我在数据属性和jQuery方面存在一些问题，因此我尝试避免为此使用jquery。 因此，您可以使用它并在变量上使用带有ID的ajax调用。

Answer 9

看一下我的示例，它可以解决您的问题：

$(document).ready(function(){
    // assuming you're adding/removing .delete-record elements you should bind click on body
    $('body').on('click', '.delete-record', function(e){

        e.preventDefault(); // prevent default action

        var id = $(this).attr('data-id') || false; // i removed $target, you don't need it

        if( id !== false ){ // if id exists
           if(confirm('Entry with ID ' + id){
           //AJAX
           }
        }else{ console.log('id is invalid', id, typeof id); }

    });
});

Answer 10

使用jQuery .data()函数：

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


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