Question

我正在创建删除评论功能这是用于删除评论功能的html片段。

<div id="comment-area">
  <div class="list-border">
    <small class="mdl-button delete-comment js-delete-comment pull-right" data-url="http://myproject.com/comment_controller/delete_comment/12/6">
      x
    </small>
  </div>
  <div class="list-border">
    <small class="mdl-button delete-comment js-delete-comment pull-right" data-url="http://myproject.com/comment_controller/delete_comment/13/6">
      x
    </small>
  </div>
</div>

这是删除评论的功能，当文档准备就绪时会自动加载，

function delete_comment () {
  $('.delete-comment').click( function (e) {
    var url = $('.delete-comment').attr('data-url');
    $.ajax({
      url: url,
      type: 'get',
      dataType: 'json',
      success: function (data) {
        $('#comment-area').html(data.comments);
        delete_comment();
      },
      error: function () {
        alert('error');
      }
    });
  });
}

如果我要点击.delete-comment，那么上面给出的html中此函数的问题 data-url="http://myproject.com/comment_controller/delete_comment/13/6"注意此"13/6"，javascript函数delete_comment()，在这一行

var url = $('.delete-comment').attr('data-url');

选择同时获取data-url="http://myproject.com/comment_controller/delete_comment/12/6"注意此"12/6"，以查看差异，而不是我点击的data-url {。}}。

简而言之，此功能始终选择.delete-comment，无论我要点击哪个first-child div small。

最佳解决方案是什么？

Answer 1

尝试

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

attribue value className与multiple elements class相同attribute value first element dom value element正在被退回。

因此，您需要获取clicked的{{1}} this，value可以使用element获取点击.load() console.log() }。

Answer 2

一种更可靠的方法是使用 jQuery .data() 函数。

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

这将选取任何可能已通过 JavaScript 更改但未在 DOM 属性中更新的动态添加/更新的 url。

使用javascript函数正确获取data-url

2 个答案: