Question

我有一个php页面a.php，代码如下：

<ul class="dropdown-menu noclose">

工作正常，导致下拉菜单不会关闭，直到用户点击框外。

但是，当我在a.php的div中加载整个b.php页面时，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和两者中，但当页面加载到div中时，noclose仍然不起作用。我做错了什么？

更新

这是加载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成功函数中，它现在保持打开状态，（noclose无需帮助！）

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

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

$.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请求，您需要在请求完成后附加事件。您noclose的代码应该在load的回调中。如果您需要附加脚本文件dropdowns-enhancement.js，请使用$.getScript加载js

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

Answer 2

似乎该库可能不支持在 Ajax请求之后加载的内容（虽然它使用的是jQuery的.on - 这使得它不受支持而很奇怪），不幸的是{{1}处理程序不会暴露在插件脚本范围之外。

因此，您可能需要手动为已加载的元素重新运行that handler *，作为解决方法：

^{*（在源代码中搜索noclose）}

noclose

顺便说一句，提出拉取请求（使用ajax支持脚本）或打开问题将是一个更好的态度！

修改

另一种尝试是重新执行完整的下拉列表增强处理，就像在their repository中看到的那样：

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

但这需要复制他们的$(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。它几乎就像是anpsmn的解决方案，但实际上我从this other question的混合操作系统答案得到了它，所以它在重新添加之前删除了以前的脚本标记，并使用cachebuster来确保它将被重新加载：

dropdowns-enhancement.js

然后，在每个包含增强下拉列表的内容的ajax之后调用它：

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

Twitter Bootstrap的noclose在div内部不起作用

更新

2 个答案: