引导下拉菜单不适用于 ajax

Posted 2023-02-24

【中文标题】引导下拉菜单不适用于 ajax

【英文标题】：bootstrap dropdown not working with ajax

【发布时间】：2018-03-31 20:48:08

【问题描述】：

所以我正在使用 Django 创建我的博客，并且我正在开发通知系统。我希望当用户单击下拉以将所有通知标记为已看到其工作并且一切正常但是当我添加 Ajax 时下拉列表停止工作但 Ajax 工作正常我尝试更改 html 中的脚本位置但没有。

使用

在本地引导 3.3.7 jquery

ajax：

<script>
    $(document).ready(function() 
    $("#n_d").click(function(event)
        $.ajax(
             type:"POST",
             url:"% url 'seen' %",
             success: function()
                document.getElementById("mcount").innerHTML = 0
             
        );
        return false;
   );

);
</script>

下拉菜单（在导航栏内）

% if user.is_authenticated %
         <li class="dropdown">
         % notifications request as notifications %
      <a href="#" class="dropdown-toggle" id="n_d" onclick="return x=1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i aria-hidden="true" class="fa fa-inbox "> <span class="label label-info" id="mcount">% noticount request %</span></i></a>
      <ul class="dropdown-menu">
          % load blog_tags %

          % for notification in notifications %
              <li>
                <div class="col-md-3 col-sm-3 col-xs-3"><div class="notify-img"><img src="https://www.awn.com/sites/default/files/styles/userthumbnail_tiny/public/avatar92.jpg?itok=i7013HnC" ></div></div>
                  <div class="col-md-9 col-sm-9 col-xs-9 pd-l0"><a href="% url 'detail' notification.post_pk %"> notification.FromUser &nbsp; notification.content </a></div>
                </li>
          % endfor %
      </ul>
    </li>
    % endif %

奇怪的标签是 Django 的东西。

【问题讨论】：

任何 js 错误？你检查过你的 DOM 吗？你真的需要一步一步调试它

感谢您的回复，是的，我所做的一切看起来都不错

我想我现在发现了问题，因为我仔细检查了你的代码！检查我的答案

【参考方案1】：

您的代码似乎有错误！我可以理解你复制粘贴了一些东西，因为它不是很一致。

你有这个onclick="return x=1" data-toggle="dropdown"，你正在上面的jQuery脚本中监听另一个onClick事件。

通过这样做，您将覆盖初始对象onclick，并且可能与触发菜单打开的toggle="dropdown" 冲突。

你应该在那里尝试不同的实现。

尝试通过删除 data-toogle="dropdown" 并在 ajax 代码中添加 $($(this).data("target")).modal("show"); 而不是 return false 来破解它。

【讨论】：

谢谢，我删除了 onclick 但仍然无法正常工作

实际上我添加了onclick，因为我认为它会解决问题：|我讨厌复制粘贴人的代码，所以有什么问题

是的，onclick 并不是唯一的问题。如果您删除 jQuery onClick 它会正常工作吗？检查这个***.com/questions/35034394/…

我很抱歉问了很多问题，但是该怎么办！

尝试通过删除data-toogle="dropdown" 并在您的ajax 代码中添加$($(this).data("target")).modal("show"); 而不是return false 来破解它。