javascript - 动态添加事件监听器到dom

Question

我创建了一个小脚本，作为目标，可以根据输入值计算体重指数 (BMI)。脚本如下所示:

var config = {
    "imc": {
        "weight": {
            "selector": "#weight",
            "triggers": [
                "click",
                "focusout",
                "keyup"
            ]
        },
        "height": {
            "selector": "#height",
            "triggers": [
                "click",
                "focusout",
                "keyup"
            ]
        },
        "result": {
            "selector": "#imc",
            "triggers": [
                "click",
                "focusout"
            ]
        }
    }
};


    $.each( config.imc, function( name, attributes ) {
        console.log('adding events to dom elements...');

        var selector = $(attributes.selector);

        $.each( attributes.triggers, function( index, trigger ) {
            selector.on(trigger, function(){
                console.log('calculating...');
            });
        });
    });

例如，当用户在某些字段(#weight、#height、#imc)中设置文本时，“正在计算”消息应该显示在控制台中(根据触发器)，但这就是问题所在...永远不会打印消息。与另一条消息“向 dom 元素添加事件...”不同，它打印正确。

Answer 1

看来您还没有添加 DOM。你需要在添加监听器之前添加 DOM

例如:

添加 DOM:

 $("<div id='myDiv'>").appendTo(container);

然后添加监听器

 $("#myDiv").on("eventListener",function(){

 ....

 });