函数$('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处理程序范围内定义.你最好直接绑定处理程序,如下所示:

$(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...
   }
});