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');
});

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

您可以了解有关事件委托covariant

的更多信息

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

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

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

1 个答案: