javascript - 如何使用附加了 ajax 的触发器删除附加数据？

Question

我使用 jQuery 和 Ajax 创建了一个函数，将单独的 PHP 文件中的信息附加到另一个文件中。让我们将目标文件称为“主页”，将包含数据的文件称为"template"。

所以我使用这个函数:

var box = $('#infoPageContainer'),
    close = $('.arrow');

btn1.click( function(){
    event.preventDefault();
    if( box.hasClass( 'active' )){
        box.removeClass( 'active' );
        box.css( "width", "0%" );

        $('#placeholder1').fadeOut(600);

        setTimeout(function(){
            $('#placeholder1').html("");
        },1000);

    } else {

        box.addClass('active');
        box.css( "width", "100%" );

        $.ajax({
            url: 'template/parts/Template.php',
            success: function(data){
                $('#placeholder1').html(data).fadeIn(600);
            },

            beforeSend: function(){
                $('#placeholder1').html("loading").fadeIn(600);
            }
        });
    }
});

要附加此数据:

<div class="mainImgContainer1 templateImgContainer"></div>

<div class="textContainer">

    <img src="img/arrow-01.png" alt="arrow" class="arrow">

    <div class="titleContainer"><h3>Veldopstellingen</h3></div>

    <div class="textWrapper">
        <h4>Dit is de titel</h4>
        <p class="broodTekst">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </div>
</div>

如您所见，我使用一个开关来检查“Active”类并运行相应的函数。然而，我想要的是删除附加数据的函数，该函数由附加的按钮触发(带有箭头类的 Img)。像这样:

close.click( function(){
    event.preventDefault();
    box.removeClass( 'active' );
    box.css( "width", "0%" );

    $('#placeholder1').fadeOut(600);

    setTimeout(function(){
        $('#placeholder1').html("");
    },1000);
});

但是当我这样做时，即使当我不使用附加对象作为触发器时该函数确实起作用，也不会发生任何事情。我该怎么办？

Answer 1

jQuery 仅在运行时识别页面中的元素，因此 jQuery 无法识别添加到 DOM 的新元素。要解决这个问题，请使用 event delegation ，从新添加的项目到 DOM 中某个点的冒泡事件，该点在 jQuery 在页面加载时运行时就在那里。许多人使用 document 作为捕获冒泡事件的地方，但没有必要一直沿着 DOM 树向上走。理想情况下you should delegate to the nearest parent existing at the time of page load.

在您的代码中，它将类似于:

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