Twitter Bootstrap下拉列表不当行为

时间:2012-12-20 13:55:32

标签: jquery jquery-selectors twitter-bootstrap twitter-bootstrap-rails

我有两个下拉列表有一个id而另一个没有,我想触发ajax请求和动作来显示下拉列表。 这就是我试图这样做的方法,但是有一些不当行为,在这种情况下是ajax请求它被触发但是当显示下拉列表时它显示两个下拉列表。

          <li class="dropdown top-dropdown">
            <a href="#" class="dropdown-toggle" style="padding-right:0;" data-toggle="dropdown">hola</a>
            <ul class="dropdown-menu">
              <li>
                <a href="/hola"><i class="icon-user"></i>
                  Profile
                </a>
              </li>
              <li>
                <a href="/hola"><i class="icon-wrench"></i>
                  Settings
                </a>
              </li>              
            </ul>
          </li>

          <li id="hola" class="dropdown">
            <a id="go_do_something" href="<%= url %>" class="dropdown-toggle disabled" style="padding-right:0;" data-toggle="dropdown">           
              <b id="noti_container">
                <i class="icon-bullhorn"></i>
              </b>
            </a>
            <ul class="dropdown-menu">              
                <li>
                  <a href="/hola">
                    <i>added on yesterday</i>
                  </a>
                </li>              
              <li class="divider"></li>
              <li>
                <a href="#">
                  See All
                </a>
              </li>
            </ul>  
          </li>

$("#go_do_something").live("click", function(){      
    var update_user_last_n = $(this).attr('href');

    $.ajax({
      type: 'GET',
      url: update_user_last_n
    }).done(function(xhr, status) {            
      $("#hola").dropdown('toggle');
    }).fail(function(xhr, status) {

    });  

  });

在其他情况下,我尝试使用数据目标属性而不是href,如Bootstrap Docs中的describe,但我在浏览器上收到错误:

Uncaught Error: Syntax error, unrecognized expression: {url_on_data-target}

1 个答案:

答案 0 :(得分:0)

有一种优雅的方法可以做到这一点,但这里有一个解决方法可以解决问题:

  $("#go_do_something").live("click", function(event){
    event.preventDefault();  
    var this_a = this;  
    var url = $(this_a).attr('href');

    $.ajax({
      type: 'GET',
      url: url
    }).done(function(xhr, status) {                  
      $(this_a).removeClass("disabled");
      $(this_a).click();
    }).fail(function(xhr, status) {

    });  

  });