为什么我不能使用 jquery 访问 ajax 拉取的内容 [重复]答案

【问题标题】：Why cant i access ajax pulled content with jquery [duplicate]为什么我不能使用 jquery 访问 ajax 拉取的内容 [重复]
【发布时间】：2013-01-13 10:35:06
【问题描述】：

可能重复：
Use variable outside the success function from an ajax/jquery call

我有这段代码，但我不明白为什么 html 元素的访问只能在 ajax 成功函数内部工作。无论哪种方式，表单都是从 ajax 拉入的，但只有当我将所有对它的元素的选择放在 ajax 函数中时，我才能访问它。

console.log('submit clicked'); 以这种方式不触发，但在“ajax 成功”内部，我认为使用 ajax 引入的所有内容都是 DOM 的一部分？

jQuery(document).ready(function($) {

console.log('ready');

$.ajax({
    type: 'GET',
    url: 'admin-ajax.php',
    data: { action: 'get_arve_form' },
    success: function(response){
        // var table = $(response).find('table');
        $(response).appendTo('body').hide();
        console.log('response');

                    [ if i move the code below this ajax function in here its workign fine why not outside of it?]

    }
});

// handles the click event of the submit button
$('#mygallery-submit').click(function(){
    console.log('submit clicked');
                [...]
        });

【问题讨论】：

如果您发布了“不起作用”的代码并解释了具体不起作用的代码，这将有所帮助。
@AaronKurtzhals 我确实做到了！

标签： javascript jquery ajax forms wordpress

【解决方案1】：

Ajax 是异步的，因此您的元素在 ajax 调用完成之前不存在。

话虽如此，有两种方法可以解决它：

1) 将您的代码移动到成功处理程序中

2) 使用事件委托将您的事件处理程序绑定到所有当前和未来元素。

#2 的一个例子：

$(document).on('click', '#mygallery-submit', function(){
    console.log('submit clicked');
});

查看jQFundamentals，了解有关事件委托的更多信息。

【讨论】：

所以应该是这样的，好吧我学到了一些东西。我想我现在把它移到成功里面

【解决方案2】：

这就是 ajax 的工作原理。加载外部页面时，您可以在成功处理程序上仅使用它。如果您希望它在其他地方可用，则必须以某种方式保存它，就像您正在做的那样。

但是，.click 函数在 ajax 调用返回成功之前执行。当您选择 $('#mygallery-submit') 时，它很可能是空的（您可能通过 ajax 加载它）。因此，如果您想在文档就绪时声明 click 函数，而不是在加载 ajax 页面时声明，您必须使用 .on 函数：

$('body').on('click', '#mygallery-submit', function() {
    console.log('submit clicked');
});

【讨论】：

【解决方案3】：

因为.click() 不是委托处理程序。如果您尝试将事件绑定到的元素在执行时不存在，则不会绑定该事件。请改用.on()。

$('body').on('click', '#mygallery-submit', function() {
    // etc.
});

【讨论】：