Javascript 动态添加输入赢得'；t与事件处理程序和触发器绑定

第一个DIV可以工作，但是当添加新的DIV行时，它们不会被触发。我怀疑这与事件处理程序没有与动态添加的元素绑定有关，但我应该如何解决这个问题，谢谢！：

//这增加了更多的教育投入
$（文档）.ready（函数（）{
$（“#添加语言”）。单击（函数（）{
$（“#语言部分”）.append（“语言：说读写流利”）；
});
$（“#语言部分”）。在（“单击”，“删除语言”，函数（e）{
e、 预防默认值（）；
$（this.parent（）.remove（）；
});
//在地铁区域工作复选框
$（“input.LanguageLevel”）。在（'change'，function（）上{
var$row=$（this）.closest（'.LanguagesTable'）；
变量$input=$（'.LanguageLevel'，$row）；
$input.val（this.value+“”+this.checked）；
});
});

语言：说、读、写流利
动态添加输入后，它们不在已存在的
$（“input.LanguageLevel”）
选项数组中

因此，您需要重新运行此clickevent以查找新的输入

对我来说，它的一种工作方式是在函数中加入如下内容：

function runevent() {
    $("input.LanguageLevel").on('change', function() {
        var $row = $(this).closest('.LanguagesTable');
        var $input = $('.LanguageLevels', $row);
        $input.val(this.value + " " + this.checked);

    });
}

//you initially run the event
runevent();


$("#addLanguage").click(function(){
    $("#LanguagesSection").append("<div class=\"LanguagesTable\">LANGUAGE: <input name=\"Languages[]\">SPEAK <input type=\"checkbox\" class=\"LanguageLevel\" name=\"LSpeak[]\" value=\"Speak\"> READ <input type=\"checkbox\" class=\"LanguageLevel\" name=\"LRead[]\" value=\"Read\"> WRITE <input type=\"checkbox\" class=\"LanguageLevel\" name=\"LWrite[]\" value=\"Write\"> FLUENT <input type=\"checkbox\" class=\"LanguageLevel\" name=\"LFluent[]\" value=\"Fluent\"><input name=\"LanguageLevels\" class=\"LanguageLevels\" size=\"37\" placeholder=\"<--Please Choose one of the four\" readonly value=\"level: \"><a href=\"#\" class=\"removeLanguage\">Remove</a></div>");
    //and you run the event every time you click the button
    runevent();


});

$("#LanguagesSection").on("click", ".removeLanguage", function(e){
    e.preventDefault();
    $(this).parent().remove();
});

函数runevent（）{
$（“input.LanguageLevel”）。在（'change'，function（）上{
var$row=$（this）.closest（'.LanguagesTable'）；
变量$input=$（'.LanguageLevel'，$row）；
$input.val（this.value+“”+this.checked）；
});
}
//您最初运行该事件
runevent（）；
$（“#添加语言”）。单击（函数（）{
$（“#语言部分”）.append（“语言：说读写流利”）；
//每次单击按钮时都会运行事件
runevent（）；
});
$（“#语言部分”）。在（“单击”，“删除语言”，函数（e）{
e、 预防默认值（）；
$（this.parent（）.remove（）；
});
按照链接副本中的建议，使用事件委派

在您的代码中，这是一个简单的单行更改，我在下面已经提到

对于
.removeLanguage
元素，您已经在
单击
事件上使用事件委派，只需在
输入.language级别
元素上执行相同的操作即可


//这增加了更多的教育投入
$（文档）.ready（函数（）{
$（“#添加语言”）。单击（函数（）{
$（“#语言部分”）.append（“语言：说读写流利”）；
});
$（“#语言部分”）。在（“单击”，“删除语言”，函数（e）{
e、 预防默认值（）；
$（this.parent（）.remove（）；
});
//在地铁区域工作复选框
//以下行已更改为使用事件委派：
$（“#LanguageSection”）。on（'change'，“input.LanguageLevel”，function（）{
var$row=$（this）.closest（'.LanguagesTable'）；
变量$input=$（'.LanguageLevel'，$row）；
$input.val（this.value+“”+this.checked）；
});
});

语言：说、读、写流利
对。正如链接中引用的公认答案——“如果您的页面正在动态创建类名为dosomething的元素，那么您会将事件绑定到已经存在的父级，通常是文档。”