Question

我有一个Bootstrap下拉按钮，填充如下：

<ul id="brandselection" class="dropdown-menu">
  <li><a href='#'>Brand1</a></li>
  <li><a href='#'>Brand2</a></li>
</ul>

然后我有以下JS代码动态创建并填充第二个下拉按钮，具体取决于第一个选择：

$(function() {
  $("#brandselection li").click(function(e){
    e.preventDefault();
    $("#model").load("getModelsUL.php?brand=" + encodeURI($(this).text()));
  });
});

生成的按钮代码与上述按钮代码基本相同 - 并且可以正确创建。

但是，我使用完全相同的JS函数（只有div的id不同）来响应第二个按钮上的点击 - 它甚至都没有进入函数。

我认为没有考虑DOM是一个问题，因为第二个按钮是在初始DOM之后创建的，但我不知道如何正确处理它。

Answer 1

这只是一个很小的改变，使这项工作。将您的代码更改为此...

$(function() {
    $("#brandselection").on("click", "li", function(e){
        e.preventDefault();
        $("#model").load("getModelsUL.php?brand=" + encodeURI($(this).text()));
    });
});

将点击处理程序附加到#brandselection但仅在选择器与li的第二个参数匹配时触发处理程序。

这是事件委托，适用于这种类型的场景，您希望对事件处理程序进行编码并忘记它们，以及将来会发生变化的DOM。

对初始DOM之后创建的HTML元素做出反应

1 个答案: