javascript - 使用 jQuery 从下拉列表中删除 html 元素

Question

<script>

    $(document).ready(function() {
        $('.notification .tools .remove').on('click', function () {
            alert('hola');
            $(this).parentsUntil('.notification').remove();
        });
    });


</script>

<div id="notification-list" class="notification-chain" style="display:none">

    @foreach ($notifications as $notification)

    <div class="notification" style="width:300px">

        <div class="tools">
            <a href="javascript:;" class="remove"></a>
        </div>

        <div class="notification-messages">

            <div class="message-wrapper">

                <div class="heading">{{ $notification->name }}</div>
                <div class="description">{{ 'User ' .$notification->points_to. ' ' .$notification->content }}</div>
                <div class="date pull-left">{{ $notification->created_at }}</div>

            </div>

            <div class="clearfix"></div>

        </div>

    </div>

    @endforeach

</div>

你好读者，

以上是我目前正在使用的内容。它会显示一个下拉列表来保存用户收到的所有通知，我目前在每个“通知”div 的顶 Angular 都有一个 x。

但是上面的 jQuery 似乎都没有运行。警报不会显示，我在控制台中什么也得不到。

请随意 mock 我，告诉我我做错了什么蠢事。

非常感谢。

---

感谢大家的帮助。

这里有一些具有更广泛上下文的 laravel.io 文件:

完整的 html: http://laravel.io/bin/Nk4xP

下拉列表的 js: http://laravel.io/bin/9vn1O#

Answer 1

这里有一些调试技巧:

考虑所有可能出错的地方，然后开始排除它们。例如:

1. 可能根本没有加载 jQuery。

2. 可能事件处理程序的选择器不正确，jQuery 找不到要将事件处理程序附加到的元素。

3. 也许您的 $(document).ready() 函数中的代码没有执行，并且事件处理程序从未设置。

结合使用对代码和浏览器控制台的更改，您可以排除这三件事:

是否加载了 jQuery？打开控制台并输入 $ - 如果它显示 undefined，那是你的问题。

元素的选择器是否不正确？打开控制台并键入 $('.notification .tools .remove')。如果你得到一个空数组，那就是你的问题。作为一个额外的好处，Chrome(可能还有其他浏览器)会在您将鼠标悬停在所选元素上时突出显示它 - 这在您选择的元素与预期不同的情况下很有用。

$(document).ready() 代码是否正在执行？在函数顶部粘贴一个不同的 alert 并查看它是否在您重新加载页面时触发。

一次解决此类问题很重要 - 如果您同时更改两个或多个内容，并且问题消失(或出现新问题)，会发生什么情况？您不会知道是哪一个解决了问题或导致了问题!