Question

这是我在这里的第一个问题，我一直在寻找这个问题很长一段时间，我不仅仅是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?");
        });
    });
});

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

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

Answer 1

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

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

如果您需要确切地了解哪个元素被点击了，那么它在ev.target中可用（例如）。

Answer 2

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

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

Answer 3

当你得到片刻时，可能值得给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?");
});

希望这有帮助！

$（选择器）。每个表格行与Laravel

3 个答案: