jquery - 如何使用 jQuery .on() 方法声明分组事件来识别未来元素？

Question

我有以下结构：

HTML

<select name="var" id="myselect">
    <option value="">Select</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>  
</select>

JS

$("#myselect").on({
    click: function(){
        console.log("event click fired!");
    },
    change: function(){
        console.log("event change fired!");
    }
});

事件没有触发，因为select在页面加载后动态创建。

有人知道如何使用.on()来识别具有分组事件的未来元素吗？

Answer 1

您的代码有效。

在您可能出错的事情中：

• 你不导入 jQuery
• 您的脚本在 HTML 之前被调用（只需将您的脚本放在正文的末尾）

如果您不能将脚本放在正文的末尾，请将其包含在准备好的事件处理程序中：

$(function(){
 $("#myselect").on({
    click: function(){
        console.log("event click fired!");
    },
    change: function(){
        console.log("event change fired!");
    }
 });
});

编辑 ：

如果选择是动态创建的，请使用：

$(document.body).on('click', "#myselect", function(){
     console.log("event click fired!");
}).on('change', "#myselect", function(){
     console.log("event change fired!");
});

请注意，您可能会替换document.body为调用此代码时存在的元素的选择器，该选择器将包含该选择。