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标签上：

<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

您可以尝试将锚标记的角色指定为button。然后，您不必担心指定href，因为锚标记将被视为按钮。 https://developer.mozilla.org/en-US/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
            }
        });
    });

jQuery点击事件为空

10 个答案: