jquery - 函数输出 $ ('document' ).ready()

Question

我有这个简单的代码

$(document).ready(function(){

   $.ajax({
      success: function(id) {
         $('#ele').append('<a href="" onclick="deleteImg(id)">')
      }
   })

   function deleteImg(id) {
      foo...
   }

}

但是，当我单击创建的 href 时，我收到此错误

deleteImg is not defined

我必须将deleteImg函数放在$(document).ready()之外才能工作

为什么？

非常感谢!

Answer 1

当调用函数的字符串版本时，例如在 onclick="deleteImg(id)" 中，它会在全局上下文中执行，这意味着它基本上是在查找:

window.deleteImg

但它不存在，它仅在您的 document.ready 处理程序的范围中定义。您最好直接绑定(bind)处理程序，如下所示:

$(function(){
   $.ajax({
      success: function(id) {
         $("<a href='#'></a>").click(function() {
           deleteImg(id);
         }).appendTo('#ele');
      }
   })
   function deleteImg(id) {
      //foo...
   }
});

或者，如果它用于其他用途，则将其存储在元素的数据中，如下所示:

     $("<a href='#'></a>").data('id', id).click(function() {
       deleteImg($.data(this, 'id'));
     }).appendTo('#ele');

或者，将其全部组合起来，并以这种方式访问​​它:

$(function(){
   $.ajax({
      success: function(id) {
         $("<a href='#'></a>").data('id', id).click(deleteImg).appendTo('#ele');
      }
   })
   function deleteImg() {
      var id = $.data(this, 'id');
      //foo...
   }
});