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

Question

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

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

这实际上是我正在做的事情:

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

    <script>
        $('#deletePost{{$post->id}}').on('click', function(){
            // create confirm dialog
            // delete the post with id {{$post->id}}
        })
    </script>
@endforeach

为每个帖子创建 JavaScript 代码。有什么方法可以让我在底部定义一次监听器，并且所有删除​​按钮都以不同的值执行该事件。

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

Answer 1

使用Class Selector ('.class')附加事件处理程序和自定义 data-* 属性来保存任意数据，即帖子 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>