Question

我希望在＆＃39; x＆＃39;时删除项目的行。被压了。但是在我将一个项目添加到列表后，它不会对.click（function（）{}）作出反应。当我将同一项目的内容粘贴到HTML中时，它确实有效，而我无法找到项目本身的差异。

php页面：

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

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





});

当我向＆＃39; leden＆＃39;添加元素时，会出现问题。列表，然后按x删除它。出于调试目的，我更改了它以将行的背景颜色更改为红色。

如果需要任何其他文件，请访问github页面：https://github.com/renesteeman/Informatica-Methode-Xampp/tree/master/design%20V2

提前感谢您的帮助！

解决方案：

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

Answer 1

您需要使用jQuery event delegation

所以改变： -

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

于： -

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

等 其他选民 （动态添加）

Answer 2

将所有内部click功能更改为on。

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

无法对附加元素执行功能

2 个答案: