Question

很抱歉再次询问此问题，但代码无法执行。问题是我有一个php循环，它产生一个像下面这样的html

<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^=选择器。没有必要迭代元素然后绑定事件，事件可以直接绑定到选择器本身。

$("[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);
        }
    });
});

Answer 2

只需使用这样的点击事件：

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

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

Answer 3

你可以使用，

$("[class^=js-delete-comment]").click(function() {
  var url = $(this).data("url");
  $.ajax({
    url: url,
    type: 'POST',
    dataType: 'json',
    success: function(result) {
      console.log(result);
    }
  });
});

^是以选择器开头的属性。你可以用它来选择课程
使用data（）方法获取data-url

Answer 4

我不明白为什么要使用类名选择这些<a>链接。只需将您的代码放在父<div>

中

  <div id="js-delete-comment"> 
       <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>
 </div>

你的JQuery代码将是

    $('#js-delete-comment > a').click(function(){
    $.ajax({
      url       : $(this).data('url'),
      type      : 'POST',
      dataType  : 'json',
      success   : function(result) {
        console.log(result);
      }
    }); 
  });

jQuery选择器用于处理循环结果中的click函数

4 个答案: