Question

可能重复：
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');
                [...]
        });

Answer 1

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

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

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

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

＃2的一个例子：

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

查看jQFundamentals以了解有关活动委派的更多信息。

Answer 2

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

但是，.click函数在ajax调用返回成功之前执行。当你选择$（'＃mygallery-submit'）时，它很可能是空的（你可能通过ajax加载它）。那么如果你想在文档就绪上声明click函数，而不是在加载ajax页面时，你需要做的就是使用.on函数：

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

Answer 3

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

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

为什么我无法使用jquery访问ajax拉内容

3 个答案: