bootstrap下拉列表不能使用ajax

时间:2017-10-19 18:07:06

标签: javascript jquery ajax django twitter-bootstrap

所以我用Django创建我的博客,我正在开发通知系统。我想当用户点击下拉标记所有通知时看到它的工作状态并且每件事情都运行良好但是当我添加Ajax时,下拉停止工作但Ajax工作正常我尝试更改HTML中的脚本位置但没有。

使用

  • bootstrap 3.3.7 local
  • 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" 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的东西。

1 个答案:

答案 0 :(得分:1)

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

您正在使用此onclick="return x=1" data-toggle="dropdown"并且您正在侦听上述jQuery脚本中的另一个onClick事件。

通过此操作,您将覆盖初始对象onclick,并可能与触发菜单打开的toggle="dropdown"冲突。

你应该尝试不同的实现。

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