javascript - JS 函数未从动态加载的元素中调用

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 3 年前。

我有一个<div> ，我在其中添加 <input>和一个<a>动态地使用 jQuery。

像这样:

<div>当addServicePanel()被填满时称为:

function addServicePanel() {
    var wrapper = $(".main_wrapper"); //Fields wrapper
    var add_button = $(".add_ele_button"); //Add button ID
    var x = 1; //initlal text box count
    $(add_button).click(function (e) { //on add input button click
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            $(wrapper).append('
                <div class="service_parent_div">
                    <div class="myContainer">
                        <div class="myPipeline">
                            <div class="form-group">
                                <label class="col-md-4 control-label">Pipeline</label>
                                <div class="col-md-4">
                                    <input id="pipeline" name="pipeline" type="text"/> </div>
                                    <a href="#" class="add_field_button">Add Board (+)</a> </div>
                        </div>
                        <div class="input_fields_wrap"></div>
                    </div>
                </div>
            '); //add input box
        }
    });
}

我已经编写了与 .add_field_button 一起使用的函数:

function addSubPanel() {
    var max_fields = 40; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).on("click", this, function (e) { //on add input button click
        alert("<a> cliked"); // THIS IS NOT GETTING CALLED
        e.preventDefault();
    });

}

当我点击<a>时标签，我想要调用一个函数，我已经在我的 js 文件中编写了该函数。

我面临的问题是，当我点击 时，函数没有被调用。

我认为这是因为在页面加载时，元素尚未呈现，因此没有任何内容与该函数绑定(bind)。

如何修复它？

谢谢

Answer 1

将此代码更改为

 $("body").on("click", ".add_field_button", function (e) { 
    alert("<a> cliked");
    e.preventDefault();
});

动态加载的元素不会注册事件，除非您从注册事件时已加载的元素进行委托(delegate)。这里事件注册是从 DOM 主体委托(delegate)的。