Question

我在一个页面上有多个帖子，每个帖子都包含一个用于删除帖子的删除按钮。每个帖子都有一个唯一的ID。我想使用ajax删除帖子。

因此，我需要为每个帖子创建不同的jquery事件侦听器。

以下是我实际做的事情：

-deps

为每个帖子创建了javascript代码。有没有办法，所以我可以在底部定义一次监听器，所有删除按钮都用不同的值执行该事件。

我的意思是点击删除按钮后，它会给我帖子的ID，我会删除该帖子。

Answer 1

使用Class Selector ('.class')附加事件处理程序和自定义data-*属性来保留任意数据，即 post id ，可以使用.data(key)方法重试。

@foreach($posts as $post)
    <h1>$post->some_field</h1>
    <a href="#" data-id="{{$post->id}}" class="deletePost">delete</a>
@endforeach

<script>
    $('.deletePost').on('click', function(){
        // delete the post with id {{$post->id}}
        var postId = $(this).data('id')
    })
</script>

Answer 2

向每个删除按钮添加事件监听器的替代方法（取决于有多少帖子）是为帖子添加父容器，可能称为.posts，附加一个单个事件到该元素，并使用事件委派从按钮点击中捕获事件，因为它们冒泡DOM。这称为event delegation。

$('.posts').on('click', '.delete', function() {
  const $post = $(this).parent();
  const id = $post.data('id');
  console.log(id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="posts">
  <article data-id="1">
    <button class="delete">Delete</button>
  </article>
  <article data-id="2">
    <button class="delete">Delete</button>
  </article>
  <article data-id="3">
    <button class="delete">Delete</button>
  </article>
</section>

多个html元素针对单个js事件

2 个答案: