AJAX 成功 html 对话框，不会在按钮单击时关闭

Question

所以我提出了一个 AJAX 请求，它提交正常并按预期返回成功的 HTML - 但在返回到目标 div 元素的 HTML 中，它有一个按钮。我已经为此添加了 jQuery，当它被点击时，它是隐藏 HTML 以防止 AJAX 成功。

简而言之：我想要关闭按钮来关闭 div，但它似乎不起作用。

$('#user_report__dd #make_report').click(function(){
        var interaction_type = $(this).data('interaction_type');
        var user_id = $(this).data('user_id');
        $.ajax({
            type: 'POST',
            dataType: 'html',
            url: ajax_url,
            data: {
                interaction_type: interaction_type,
                user_id: user_id,
            },
            success:function(html){
                // $('.ajax_call').html(html);
                $('.ajax_call').html(html);
                // stop body from scrolling
            }
        });
    });

if(isset($_POST['interaction_type']) && $_POST['interaction_type'] == 'report_user'){
    global $report;
    $report->Form($_POST['user_id'], 'user');
    // This returns the HTML
}

然后在我的主 jQuery 文件中

$('.close').click(function(){
        $(this).parents('.pulled_in_html');
    });

Answer 1

因为在创建点击事件处理程序时，DOM 中不存在该元素，所以它找不到该元素。相反，您可以从body 委托事件，如下所示：

$('body').on('click', '.close', function(){
    $(this).parents('.pulled_in_html');
});

事件委托允许您避免将事件侦听器添加到 特定节点；相反，事件侦听器被添加到一个父级。 该事件侦听器分析冒泡事件以找到子项的匹配项 元素。

你可以阅读更多关于事件委托here

您的代码似乎没有尝试隐藏任何内容，我不知道您是否故意将其遗漏，但要隐藏元素，您可以将 hide() 方法链接到此行：

    $(this).parents('.pulled_in_html').hide();