javascript - Twitter Bootstrap 的 noclose 在 div 中不起作用

Question

我有一个 php 页面，a.php ，使用以下代码:

<ul class="dropdown-menu noclose">

效果很好，导致下拉菜单在用户点击框外之前不会关闭。

但是，当我加载整个 a.php 时b.php 上的 div 内的页面, noclose不再有效，我不明白为什么。

//in a.js, which gets called via ajax through a.php
$("#info").load("a.html");

它的功能类似于普通的下拉菜单 - 当用户选择一个选项时，它会关闭下拉菜单。

noclose通过将以下行添加到标题中可以使用语法:

<!-- Bootstrap Dropdown Enhancements-->
<link rel="stylesheet" href="/dropdowns-enhancement.css">
<script type="text/javascript" src="/dropdowns-enhancement.js"></script>

我试过将这些添加到 a.php 中, b.php , 两者都有，但是 noclose当页面加载到 div 中时仍然无法工作。我做错了什么？

更新:

这是在 a.php 上加载的按钮.

<button type="button" id="seButton" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
  Select Options<span class="caret"></span>
</button>
<ul class="dropdown-menu noclose" role="menu">
  <li> ... </li>
</ul>

现在我已将以下内容放入我的 ajax 中success 函数，它现在保持打开状态，(在 noclose 方面没有任何帮助!)

$("#info").on('click.bs.dropdown.data-api', '.dropdown-menu.noclose > li', function (e) {
    e.stopPropagation();
});

此按钮加载于 a.php在#info里面分区按钮控制在第二个 div 中加载更多信息，仍在 a.php 上，也通过使用 ajax。那个电话在这里:

$.ajax({
  url: "search.php", 
  type: "post",
  dataType: "json",
  data: {partNumber: q , cr:newCr},
  success: function(data) {
      $("#info").on('click.bs.dropdown.data-api', '.dropdown-menu.noclose > li', function (e) {
          e.stopPropagation();
      });
      var seOutput = data;
      if (data.length > 0) {
          $("#auto").html("");   //unloads the spinner so the table can load.
          addTable(seOutput);  // calls the addTable function to create the table in #auto
      } else {                          
          //else = seOutput is empty, so there are no results to return
          $("#autoCross").html("");   //unloads the spinner so the table can load.
          toastr.options = {
              "positionClass": "toast-top-full-width"
          }
          toastr.warning('There are no ' + newCr + ' parts to report', '');
      } //closes else statement                                              
  } //closes success function
});

一旦我点击上面的按钮并且此 ajax 调用成功，就会在 #auto 中生成一个表。 div，以及作为 #info 中这篇文章来源的按钮不再下降。我可以点击它，如果我附上 onclick事件，我可以调用console.log显示浏览器看到我单击它的语句，但下拉列表不再下拉，因此除非我重新加载页面，否则我无法访问该下拉列表中的数据。

Answer 1

似乎该库可能不支持在 Ajax 请求后加载的内容(尽管它使用的是 jQuery 的 .on - 这使得它不被支持很奇怪)，不幸的是noclose 处理程序不会暴露在插件脚本范围之外。

所以你可能想重新运行 that handler * 手动加载元素，作为解决方法:

^{*(在源代码中搜索 noclose)}

$("#info").load("a.html", function() {
    $("#info")
        .on('click.bs.dropdown.data-api', '.dropdown-menu.noclose > li', function (e) {
            e.stopPropagation();
        });
});

顺便说一句，提出拉取请求(使用 ajax 支持脚本)或提出问题会是更好的态度!

---

编辑:

另一种尝试是重新执行完整的下拉菜单增强处理，就像这样，正如您在 their repository 中看到的那样:

$(document).off(namespace)
    .on('click' + namespace, closeOpened)
    .on('click' + namespace, toggle, proto.toggle)
    .on('click' + namespace, '.dropdown-menu > li > input[type="checkbox"] ~ label, .dropdown-menu > li > input[type="checkbox"], .dropdown-menu.noclose > li', function (e) {
        e.stopPropagation()
    })
    .on('change' + namespace, '.dropdown-menu > li > input[type="checkbox"], .dropdown-menu > li > input[type="radio"]', proto.change)
    .on('keydown' + namespace, toggle + ', [role="menu"], [role="listbox"]', proto.keydown);

但这还需要复制它们的namespace、closeOpened、toggle、proto.toggle、proto.change, proto.keydown.因此，正如所建议的那样，实际上完全重新加载它会更容易。

我认为这可能不是必需的，但如果这不起作用，请尝试重新执行 dropdowns-enhancement.js。它几乎就像 anpsmn 的解决方案，但实际上我是从 this other question 的混合操作系统答案中得到的。 , 所以它在重新添加之前也删除了以前的脚本标签，并使用 cachebuster 来确保它会被重新加载:

function reload_js(src) {
    $('script[src="' + src + '"]').remove();
    $('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head');
}

然后，在放置包含增强下拉列表的任何内容的每个 ajax 之后调用它:

$("#info").load("a.html", function(){
   // noclose bindings
   reload_js('/dropdowns-enhancement.js');
});