引導下拉菜單不適用於 ajax

Question

所以我正在用 Django 創建我的博客，我正在開發通知系統。 我希望當用戶單擊下拉按鈕將所有通知標記為已看到其正常工作並且一切正常但是當我添加 Ajax 時下拉列表停止工作但 Ajax 工作正常我嘗試更改 HTML 中的腳本位置但什么也沒有。

使用

• 本地引導程序 3.3.7
• 查詢

阿賈克斯：

<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" alt=""></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 的東西。

Answer 1

您的代碼中似乎有錯誤！ 我可以理解你復制粘貼了一些東西，因為它不是很一致。

您有這個onclick="return x=1" data-toggle="dropdown"並且您正在偵聽上面 jQuery 腳本中的另一個onClick事件。

通過這樣做，您將覆蓋初始對象onclick並且可能與觸發菜單打開的toggle="dropdown"沖突。

您應該在那里嘗試不同的實現。

嘗試通過刪除data-toogle="dropdown"並添加$($(this).data("target")).modal("show");來破解它$($(this).data("target")).modal("show"); 而不是在您的 ajax 代碼中return false 。