jquery - 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 委托(delegate)事件:

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

Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements.

您可以阅读有关事件委托(delegate)的更多信息 here

您的代码似乎没有试图隐藏任何东西，我不知道您是否有意遗漏了它，但要隐藏该元素，您可以链接 hide() 方法到这一行:

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