1

可能重复：
在 ajax/jquery 调用的成功函数之外使用变量

我有这段代码，但我不明白为什么 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');
                [...]
        });
4

3 回答 3

2

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

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

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

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

#2 的一个例子：

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

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

于 2013-01-29T18:52:06.120 回答
1

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

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

$('body').on('click', '#mygallery-submit', function() {
    console.log('submit clicked');
});
于 2013-01-29T18:54:20.210 回答
0

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

$('body').on('click', '#mygallery-submit', function() {
    // etc.
});
于 2013-01-29T18:52:18.187 回答