$(selector).each 在带有 Laravel 的表行上答案

【问题标题】：$(selector).each on table rows w/ Laravel$(selector).each 在带有 Laravel 的表行上
【发布时间】：2017-07-29 16:37:34
【问题描述】：

这是我在这里的第一个问题，我已经搜索了很长时间，而且我通常不仅仅是 jQuery 和 JavaScript 的新手，但我现在需要它来完成非常小的任务，所以我只是在没有深入了解的情况下进入它。

我使用的是 Laravel 5.4，我有一个表，它的主体由行上的循环组成，因为我需要它来显示来自数据库的结果，这并不重要，只是为了解释。我为一个图标提供了一个 ID，如果单击它，它将执行一些操作，首先呈现一条确认消息，然后如果单击是，则删除该行。

问题是，如果单击第一行的图标，我可以进行渲染，但对于其他人则不行。我尝试了每种方法，但似乎不起作用，可能是我误读了文档或者我不了解它的用法

我的代码非常简单（不执行删除任务）：

$('document').ready(function(){
    $('#delete').each(function(){
        $(this).click(function(){
            return!! confirm("Are you sure you want to delete this?");
        });
    });
});

我只想为我点击的每个图标显示确认框！

提前致谢！如果您需要我用更多信息更新问题，请告诉我！

【问题讨论】：

标签： javascript php jquery mysql laravel-5

【解决方案1】：

当您有时间时，可能值得一读this。了解唯一标识符和类名之间的区别将有助于您的学习进步。

继续您的问题，最佳做法是使用类名而不是唯一标识符。在可能的情况下，将元素上的id="delete" 更改为class="delete"。这样我们就可以在任何元素上绑定确认对话框，无论它已经在 DOM 中，还是在以后添加。

$('.delete').click(function () {
  return !!confirm("Are you sure you want to delete this?");
});

如果您通过 AJAX 添加包含此按钮的行，那么您希望将函数绑定为：

$(document).on('click', '.delete', function () {
  return !!confirm("Are you sure you want to delete this?");
});

希望这会有所帮助！

【讨论】：

我想我不是 jQuery 的新手，哈哈，感谢您帮助我，这解决了我的问题，感谢您的参考，我一定会阅读！

【解决方案2】：

您可以在包含元素上使用 jquery 的 .on 来获取在所有包含的 #delete 元素上触发的事件。

$('body').on('click', '#delete', function(ev) {
    return!! confirm("Are you sure you want to delete this?");
});

如果您需要准确了解点击了哪个元素，可以在ev.target 中找到（例如）。

【讨论】：

【解决方案3】：

您不能多次使用 ID 属性。我建议你改用类（如class="delete"），并使用这个：

$('document').ready(function(){
   $(document).on('click', '.delete', function() {
       return!! confirm("Are you sure you want to delete this?");
   });
});

【讨论】：