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();