Question

我创建了一些html，它有几个不同的下拉框，第一个让用户选择应该在报告中查看哪些字段，第二个让他们选择应该在报告上查看哪些月份。我开始时通过对下拉框的列表项进行硬编码，一切都按预期工作。我为这两个下拉菜单分配了一个名为“dropdown-menu”的虚拟类，这样它们都可以被同一个javascript函数引用。出于某种原因，“过滤列”下拉框不会在我创建的代码片段中打开...但这不是我遇到的问题（所以请不要对此进行跟踪）。

        $(document).ready(function() {
          var options = [];

          $('.dropdown-menu a').on('click', function(event) {
            console.log(event);
            var $target = $(event.currentTarget),
              val = $target.attr('data-value'),
              column = 'table .' + val,
              $inp = $target.find('input'),
              idx;

            if ((idx = options.indexOf(val)) > -1) {
              options.splice(idx, 1);
              setTimeout(function() {
                $inp.prop('checked', true)
              }, 0);
              $(column).toggle();

              if ($target.find("secondRow")) {
                var cs = $(".topRow").attr("colspan");
                $(".topRow").attr("colspan", parseInt(cs) + 2);
              }
            } else {
              options.push(val);
              setTimeout(function() {
                $inp.prop('checked', false)
              }, 0);
              $(column).toggle();

              if ($target.find("secondRow")) {
                var cs = $(".topRow").attr("colspan");
                $(".topRow").attr("colspan", parseInt(cs) - 2);
              }
            }

            $(event.target).blur();

            return false;
          });
        })

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-1 button-group" style="padding-top: 12px; padding-bottom: 1px; margin-bottom: 1px;">
  <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span>&nbsp;Filter Columns&nbsp;<span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <a href="#" class="small" data-value="attRate">
        <input type="checkbox" checked="checked" />&nbsp;Attendance Rate</a>
    </li>
    <li>
      <a href="#" class="small" data-value="enrDays">
        <input type="checkbox" checked="checked" />&nbsp;Ttl Enrollment Days</a>
    </li>
    <li>
      <a href="#" class="small" data-value="msdDays">
        <input type="checkbox" checked="checked" />&nbsp;Ttl Missed Days</a>
    </li>
    <li>
      <a href="#" class="small" data-value="lstRev">
        <input type="checkbox" checked="checked" />&nbsp;Lost Revenue</a>
    </li>
    <li>
      <a href="#" class="small" data-value="lstHrs">
        <input type="checkbox" checked="checked" />&nbsp;Instrl Hrs Lost</a>
    </li>
  </ul>
</div>

<div class="col-md-1 button-group" style="padding-top: 12px; padding-bottom: 1px; margin-bottom: 1px;">
  <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-list"></span>&nbsp;Select Months&nbsp;<span class="caret"></span>
  </button>
  <ul id="ddStudentMonths" class="dropdown-menu"></ul>
</div>

在我的代码中，当选择“Filter Columns”值时，会触发console.log事件并显示它是一个鼠标事件。但是，在动态插入的“选择月份”下拉框中，选择值时永远不会访问console.log事件。在上面的代码片段中，这是我单击“查看源代码”时看到的内容，它不显示动态插入列表项。但是，我可以打开下拉框并查看项目，我也可以在调试代码时看到它们。我猜这是问题发生的地方，而且我有点难过。

要填充学生月份下拉框，我正在调用以下javascript函数：

function getStudentMonths(pID) {
//pID is the page ID as stored in the table dmcPages
var param = { pageID: pID };

$.ajax({
    type: "POST",
    contentType: "application/json; charset=UTF-8",
    url: "../WebServices/myDates.asmx/getStudentMonths",
    data: JSON.stringify(param),
    dataType: "json",
    success: function (msg) {
        var data = [];

        data.push(msg.d);

        for (var i = 0; i <= data.length; i++) {
            $('#ddStudentMonths').append(data[i]);
        }

    }
})

};

webmethod正在构建列表项字符串，我已经验证它们看起来与硬编码列表项完全相同。

关于我做错的任何想法？：（

Answer 1

快速试试这个：

更改此

$('.dropdown-menu a').on('click', function(event) {

到此：

$(document).on('click', '.dropdown-menu a', function(event) {

并报告回来看看是否有诀窍？

改变的原因是;是的，.on()应该适用于动态创建的元素，但是关于你的.on('click'...在一个首先不存在于DOM中的元素的事实并不是很好的文献。这就是我们使用$(document)来监听点击的原因，因为每次都会有文档存在。然后，我们通过在.on()函数中添加类来指定您点击的内容。

使用JQuery动态插入列表项会产生与硬编码列表项不同的结果...为什么？

1 个答案: