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

Question

因此，我提出了AJAX请求，它可以很好地提交并按预期成功返回HTML-但是在返回到目标div元素的HTML中，它具有一个按钮。 我已经在其中添加了jQuery，即单击它时将隐藏AJAX成功中的HTML。

简而言之：我希望关闭按钮可以关闭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');
});

事件委托使您可以避免将事件侦听器添加到特定节点； 而是将事件侦听器添加到一个父对象。 该事件侦听器分析冒泡事件以找到子元素的匹配项。

您可以在此处了解有关事件委托的更多信息

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

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