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...');
            });
        });
    });

然后例如，当用户在某些fiels（＃weight，＃height，＃imc）中设置文本时，消息“calculate”应该在控制台中显示（根据触发器），但这就是问题...邮件永远不会打印出来。与另一条消息“向dom元素添加事件......”不一样，它确实打印正确。

Answer 1

好像你还没有添加DOM。您需要在向其添加侦听器之前添加DOM

例如：

添加DOM：

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

然后将侦听器添加到

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

 ....

 });

Answer 2

另一种方法是在向DOM添加元素之前，您可以像下面的代码一样设置监听器。

$(document).on(eventName, selector, function(){});

请注意上述代码的性能影响。但是这在动态DOM元素创建中非常有用，并且在添加到DOM之后避免搞乱挂钩事件。

动态添加事件侦听器到dom

2 个答案: