Can't execute function on appended elements

Question

I want to delete the row of an item when the 'x' is pressed. But after I added an item to the list, it won't react to the .click(function(){}). When I paste the contents of that same item into the HTML it does work, while I can't find a difference in the item itself.

The php page:

<?php
    include('../components/headerGeneral.php');
    include('../scripts/DB_connect.php');
?>

<link rel="stylesheet" href="../css/overzichtGroepAanmaken.min.css">

<body>

    <div class="title">
        <h2>
            Overzicht
        </h2>
    </div>

    <div class="bar">
        <h3>
            <?php
                if (isset($_SESSION["username"])){
                    echo 'Groep aanmaken';
                } else {
                    echo 'Login';
                }
            ?>
        </h3>
    </div>

    <div class="createGroup">
        <form class="createGroupForm" method="post" action="../scripts/createGroup.php" accept-charset="UTF-8">
            <ul>
                <li>
                    <label>Naam</label>
                    <input type="text" placeholder="Naam van de groep" name="Gnaam" maxlength="50">
                </li>
                <li>
                    <label>Omschrijving</label>
                    <textarea type="text" placeholder="Omschrijving van de groep" name="Gomschrijving" maxlength="500"></textarea>
                </li>
                <li>
                    <label>Link</label>
                    <input type="text" placeholder="Link naar bestanden" name="Glink" maxlength="50">
                </li>
                <li>
                    <label>Leden</label>
                    <div class="ledenLijst">
                        <ul>
                            <li><span class="lid">gdhjo</span><span class="delete">x</span></li>
                        </ul>
                    </div>
                    <div class="addLid">
                        <span class="addLid">
                            <input type="text" placeholder="Nieuw lid" name="Gleden" maxlength="50" autocomplete="off">
                        </span>
                        <span class="plus-sign addLidButton">+</span>
                    </div>
                </li>
                <li>
                    <label>Uw wachtwoord</label>
                    <input type="password" placeholder="Huidig wachtwoord" name="password" maxlength="50" required>
                </li>
                <li>
                    <input type="submit" value="Bevestig">
                </li>
            </ul>
        </form>
    </div>



    </div>

    <?php
    include('../components/footer.php');
    ?>

</body>

The Jquery:

$(document).ready(function(){
    //burger icon
    $(".burger-icon").click(function(){
        $(".nav-burger").toggleClass("active");
    });

    //chapter tiles
    $(".tile").click(function(){
        $(this).siblings().toggle();
        $(this).toggleClass("active");
    });

    $("select").click(function(){
        if($('select[name=newGroup]').val()!=''){
            $(this).removeClass("defaultSelect");
        } else {
            $(this).toggleClass("defaultSelect");
        }
    });

    $(".Arrow").click(function(){
        $(this).parent().parent().next().slideToggle();
        $(this).parent().parent().next().toggleClass("active");

        $(this).toggleClass("active");

    });

    $(".bar-s").click(function(){
        $(this).next().slideToggle();
        $(this).toggleClass("active");
        $(this).next().next().toggleClass("after-active");
    });

    $(".theorie-answers").slideToggle(0);

    $('.addLid').children().val(' ');
    window.setTimeout(addLid, 100);

    function addLid(){
        $('.addLid').children().val('');
    }

    $(".addLidButton").click(function(){
        var name = $(this).prev().children().val();
        var paste = '<li><span class="lid">'+ name +'</span><span class="delete">x</span></li>'
        $(this).prev().children().val('');
        $(this).parent().prev().children().first().append(paste);
    });

    $(".addLid").children().first().keypress(function(event){
        if(event.keyCode == 13){
            $('.addLidButton').click();
        }
        return event.keyCode != 13;
    });

    $(".delete").click(function(){
        $(this).parent().css("background-color", "red");
    });





});

The problem occurs when I add an element to the 'leden' list and than press the x to delete it. For debugging purposes I changed it to change the background color of the row to red.

If any other files are needed, here's the github page: https://github.com/renesteeman/Informatica-Methode-Xampp/tree/master/design%20V2

Thanks in advance for any help!

The solution:

$(document).on('click',".delete",function(){
        $(this).parent().fadeOut();
});

see [this](https://stackoverflow.com/a/1207393/492258) – asdf_enel_hak Mar 13 '18 at 07:35 — asdf_enel_hak, Mar 13 '18 at 07:35

score 3 · Accepted Answer · answered Mar 13 '18 at 07:36

3

You need to use jQuery event delegation

So change:-

$(".delete").click(function(){

to:-

$(document).on('click','.delete',function(){

And so on for other slectors too (which are added dynamically)

answered Mar 13 '18 at 07:36

Serving Quarantine period

66,345
10
43
85

score 2 · Answer 2 · answered Mar 13 '18 at 07:36

2

Change your all inner click functions to on.

$(document).on('click', '.selector', function(event) {
    event.preventDefault();
    /* Act on the event */
});

answered Mar 13 '18 at 07:36

Harsh Barach

916
9
17

I would be more helpful if you describe why it works. – Vucko Mar 13 '18 at 07:41
@Vucko You can get more idea from this link. https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Harsh Barach Mar 13 '18 at 07:45

Can't execute function on appended elements

2 Answers2