Dynamically added INPUT won't bind with event handler and trigger

Question

The first DIV works, but then when new DIV rows are added, they don't get triggered. I suspect this has to do with event handler not binding with dynamically added elements, but how should I fix this, Thanks!:

    // 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">

right. As the accepted answer in the link quotes - " if your page was dynamically creating elements with the class name dosomething you would bind the event to a parent which already exists, often document." — Udayraj Deshmukh, Feb 27 '18 at 22:27

score 1 · Accepted Answer · answered Feb 28 '18 at 00:06

As suggested in the linked duplicate, use event delegation.

In your code, this is a simple one-line change which I've noted below.

You're already using event delegation on the click event for the .removeLanguage element(s), it's just a matter of doing the same thing on the input.LanguageLevel element(s).

    // 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);

        });
    });

<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">

score 0 · Answer 2 · answered Feb 27 '18 at 22:23

After you added dynamically input, they are not in the already $("input.LanguageLevel") array of options.

So you need to rerun this clickevent to find the new inputs

For me one way that it works is to put in in function like:

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();
});

Dynamically added INPUT won't bind with event handler and trigger

2 Answers2