javascript - ajax 数据在点击事件 jquery 中不起作用

Question

我希望在第二次点击后显示一个警报。首先在 li 中，然后在 div.button 中。

HTML

<li onclick="$(document).ShowPosts(4)"></li>
<div class="button">[show posts]</div>

此函数有一个内部 ajax 调用来检索帖子数。一旦我成功地使用 ajax 返回数据，并单击按钮，警报就不会出现。

JQUERY

jQuery.fn.ShowPosts = function(id_user) {
  $.ajax({
     type: 'POST',
     url: "posts.php",
     data: {
       'id_user': id_user
     },
     success: function(data) {
       var total_posts = data;
     });

   $(".button").on('click', function(e) {
       alert(total_posts);
     }
   });
}

看起来来自 buttom 的点击事件无法识别由 ajax 检索到的变量...哪里做错了？

Answer 1

当您在函数内部使用 var 声明变量时，它的作用域只是函数，因此在函数外部无法访问它。

因此，您需要在success 函数之外声明它，并在该函数中进行设置。只有这样，您才能获得正确的值(value)。

例如，这不起作用，因为 a 的声明在 b 函数内:

function b() {
  var a = 8;
}

b();
console.log(a);

这也是，行不通(a 的值不会在 b 函数作用域之外改变)

var a = 8;
function b() {
  var a = 9;
  console.log('a inside b()', a);
}

b();
console.log('a outside b()', a);

因此，您需要在开始时声明它并在success 回调中覆盖它。

var a = 8;
function b() {
  a = 9;
  console.log('a inside b()', a);
}

b();
console.log('a outside b()', a);