时间戳

首页 > 解决方案 > 如何使用附加了 ajax 的触发器删除附加数据？

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

问题描述

我使用 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）。所以像这样：

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

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

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

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

标签： javascriptphpjqueryajax

解决方案

jQuery 仅在运行时才知道页面中的元素，因此添加到 DOM 的新元素无法被 jQuery 识别。为了解决这个问题，请使用事件委托，将新添加的项目中的事件冒泡到 DOM 中的某个点，当 jQuery 在页面加载时运行时该点就在那里。很多人用document它作为捕捉冒泡事件的地方，但没有必要一直爬到 DOM 树上。理想情况下，您应该委托给页面加载时存在的最近的父级。

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

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

推荐阅读