javascript - jQuery 选择器处理循环结果中的点击功能

Question

很抱歉再次询问这个问题，但代码不会执行。问题是我有一个生成如下 html 的 php 循环

<a class="js-delete-comment1" data-url="http://localhost/project/document_items/delete_item_comment/1">link</a>
<a class="js-delete-comment2" data-url="http://localhost/project/document_items/delete_item_comment/2">link</a>
<a class="js-delete-comment3" data-url="http://localhost/project/document_items/delete_item_comment/3">link</a>

现在，我想选择特定的类作为 jQuery 选择器使用，但行不通。看下面代码

$("[id*=js-delete-comment]").each(function(){
    $(this).click(function(){

    var url = $('.js-delete-comment').attr('data-url');
    // var id  = $('.js-delete-comment').attr('data-id');
    $.ajax({
      url       : url,
      type      : 'POST',
      dataType  : 'json',
      success   : function(result) {
        console.log(result);
      }
    });
    });
  });

如有任何帮助，我们将不胜感激!

Answer 1

元素上没有ID，使用class^=选择器。无需遍历元素然后绑定(bind)事件，事件可以直接绑定(bind)到选择器本身。

$("[class^='js-delete-comment']").click(function() {

此外，使用 $(this).data('url') 获取被点击元素的 data-url 属性。

代码:

$("[class^='js-delete-comment']").click(function (e) {
    e.preventDefault(); // To stop page redirection

    var url = $(this).data('url');

    $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        success: function (result) {
            console.log(result);
        }
    });
});