向动态添加的HTML元素添加事件侦听器

Question

在动态添加的html元素中添加事件侦听器时遇到问题。

这个场景是一些"表单"被存储在数据库中，并按顺序显示给用户。每次显示新表单时，事件处理程序都会添加到新"表单"中，即添加到子元素中。html元素的id对于每个'form'都是一样的。

对于第一个表单一切正常，但是当添加第二个表单时，即使添加了事件处理程序，它们也不会触发。

我已经尝试了无数的排列使用。click，。on。off，。addeventlistener . removeeventlistener等，但似乎不能得到这个工作。

我使用的代码是:

            //replace innerHTML             
            $( "#mob_html" ).off();                         //remove previous event listeners
            $( "#mob_html" ).remove();                          //remove html element
            $(form.html_str).insertAfter( "#event_hdr_div" );   // add new html element with form html stored in database
            // add event handler
            $('#'+child_id_1).click(function () {
                if (perm_fg==true) {
                    open();
                }
            });
            $('#'+child_id_1).click(function () {
                if (perm_fg==true) {
                    open();
                }
            });

任何建议都非常感谢!

Answer 1

选择文档对象

$(document).on('click', '.some-class', function() {
    // ...
});

Answer 2

在on()函数的帮助下，您可以绑定动态添加的元素，但请确保使用最新版本的jquery，因为早期版本的jquery可能不支持它。