jQuery动态创建元素事件处理器失效问题求助

你遇到的问题根源在于：直接给当前存在的DOM元素绑定事件时，动态创建的元素在绑定动作执行时还不存在，自然不会被纳入绑定范围。每次新增元素后重新绑定不仅冗余，还会导致旧元素重复绑定事件，触发时可能出现多次执行的隐患。正确的解决方式是用事件委托——把事件绑定到一个始终存在的父元素上，利用事件冒泡机制处理现在和未来创建的元素。

核心修改点 #

• 将textarea的input事件委托给稳定的父容器（比如document，或更具体的父元素）
• 将.fa-trash的click事件同样用委托方式绑定
• 删除新增元素后重复绑定事件的冗余代码

修改后的完整代码 #

$(document).ready(function(){
    // 事件委托处理所有textarea的input事件（含未来创建的）
    $(document).on('input', 'textarea', function(){
        expandTextArea(this);
    });

    // 事件委托处理所有删除按钮的click事件（含未来创建的）
    $(document).on("click", '.fa-trash', function(){
        $(this).parent().remove();
    });

    let end = $('.end');
    // 修正原代码选择器的错误：类选择器需要加.
    let add = $('.fa-plus');

    add.on("click", function(){
        let newrow = $('<div></div>')
            .addClass('row');

        $('<input>')
            .attr('type', 'checkbox')
            .addClass('checkbox')
            .appendTo(newrow);

        $('<textarea></textarea>')
            .attr('placeholder', 'Example task.....')
            .attr('rows', '1')
            .appendTo(newrow);

        $('<i></i>')
            .addClass('fa-sharp fa-solid fa-trash')
            .appendTo(newrow);

        end.before(newrow);
    });
});

function expandTextArea(element){
    element.style.height = "";
    element.style.height = element.scrollHeight + "px";
}

额外提示 #

• 事件委托尽量绑定到离目标元素最近的稳定父元素（比如如果所有待办项都在.todo-container里，就用$('.todo-container').on(...)代替$(document)），能提升事件处理的性能
• 原代码中let add = $("fa-plus");漏了类选择器的.，已经在修改后的代码里修正

内容的提问来源于stack exchange，提问作者benmartinis