Question

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

    // This adds more Education input
    $(document).ready(function(){

        $("#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>");
        });
        
        $("#LanguagesSection").on("click", ".removeLanguage", function(e){
            e.preventDefault();
            $(this).parent().remove();
        });

        
        // Work in Metro Area Checkboxes
        $("input.LanguageLevel").on('change', function() {
            var $row = $(this).closest('.LanguagesTable');
            var $input = $('.LanguageLevels', $row);
            $input.val(this.value + " " + this.checked);

        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="LanguagesSection">
    <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: ">
    </div>
</div>
<input type="button" id="addLanguage" value="Add Language">

Answer 1

根据链接副本的建议，使用事件委派。

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

您已经在click元素的.removeLanguage事件中使用了事件委托，这只是在{{1}上执行相同操作的问题元素。

＆＃13;

input.LanguageLevel

＆＃13;

    // This adds more Education input
    $(document).ready(function(){

        $("#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>");
        });
        
        $("#LanguagesSection").on("click", ".removeLanguage", function(e){
            e.preventDefault();
            $(this).parent().remove();
        });

        
        // Work in Metro Area Checkboxes
        // The following line is changed to use event delegation:
        $("#LanguagesSection").on('change', "input.LanguageLevel", function() {
            var $row = $(this).closest('.LanguagesTable');
            var $input = $('.LanguageLevels', $row);
            $input.val(this.value + " " + this.checked);

        });
    });

＆＃13;

Answer 2

添加动态输入后，它们不在已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(); });选项数组中。

所以你需要重新运行这个clickevent来找到新的输入

对我而言，它的一种工作方式是输入如下功能：

pcolormesh

动态添加的INPUT不会与事件处理程序和触发器绑定

2 个答案: