Question

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

所以我使用此功能：

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>

如您所见，我使用一个开关来检查“活动”类并运行相应的功能。但是，我要的功能是删除要由附加按钮触发的附加数据（Img with Arrow类）。像这样：

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() {...

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

1 个答案: