Question

源代码是这样的：

<div>
    <h4>comment content</h4>
    <a id="delcmt_{{ comment.id }}">delete this comment</a>
</div>
......
<div>
    <h4>comment content</h4>
    <a id="delcmt_{{ comment.id }}">delete this comment</a>
</div>

我要为每个“删除此评论”链接添加ajax函数：

<script type=text/javascript>
  $(function() {
    $('a#delcmt_id').bind('click', function() {
      $.get($SCRIPT_ROOT + '/del_comment', {
      }, function(data) {
        $("#result").value(data.result);
      });
      return false;
    });
  });
</script>

我能得到的是使用循环来复制每个注释的上部ajax函数，这必须非常难看。有什么好主意吗？

Answer 1

尝试添加一个类并使用jquery选择它添加一个事件处理程序。您必须使用'on'事件，因为您希望附加行为的元素可能是动态的，并在文档就绪后加载。

   @*Render all this with razor, or angular or knockout*@
    <div>
        <h4>comment content</h4>
        <span style="cursor: pointer;" id="1" data-rowid="1" class="delete-me-class">delete this comment</span>
    </div>
    <div>
        <h4>comment content</h4>
        <span style="cursor: pointer;" id="2" data-rowid="2" class="delete-me-class">delete this comment</span>
    </div>

    <script>
        $(function () {
            $('body').on('click', '.delete-me-class', function () {//http://api.jquery.com/on/  on is the latest 'live' binding for elements that may not exists when DOM is ready.
                var rowId = $(this).data('rowid');
                //TODO Use rowId for your delete ajax, or your element Id if you wish.
                alert('You clicked on the delete link with the row ID of ' + rowId);
            });
        });
    </script>

Here is a working Fiddle

将相同的ajax函数添加到注释列表的最佳方法是什么？

1 个答案: