Question

我正在做一个Dom改变，我的元素形成如下

   <select class="foodselect" data-table="table1"  style="width: 100px;">
                <option value="100">
                  Per 100g
                </option>
                <option value="225">
                  1 cup, mashed 
                </option>
                <option value="150">
                  1 cup, sliced 
                </option>
    </select>

    <select class="foodselect" data-table="table2"  style="width: 100px;">
                <option value="100">
                  Per 100g
                </option>
                <option value="225">
                  1 cup
                </option>
                <option value="150">
                  1 oz
                </option>
    </select>

因此，当我通常更改下面用于工作的代码的选项时

$('.foodselect').on("change","select", function(event){

    alert("hi");
    });

但是当我做Dom改变它不工作时。

Answer 1

您遇到的问题是您将事件处理程序绑定到特定元素，根据您上面所写的内容，根据返回的内容，动态地添加和删除DOM。一个AJAX电话。

正如最初的其他答案所暗示的那样，您希望改为将事件处理程序绑定到此select元素的父。假设父项永远不被删除（如果它更高，则更高一级），正如Benjamin Gruenbaum所说，on方法的第二个参数接受一个上下文敏感的选择器，它指定触发事件的元素，像这样：

$(".your_parent_element").on("change", "select.foodselect", function(event) {
    alert("hi");
});

旁注：其他答案没有成功的原因可能是因为他们的后代过滤器不正确。此外，你可以在技术上绑定＆＃34; body＆＃34;但你不应该这样做（除非你的父母真的是＆＃34;身体＆＃34;，这将是奇怪的）

调用函数如果选择了任何项目，请从选择框中选择After Dom update

1 个答案: