Question

i’ve got this simple code

$(document).ready(function(){

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

   function deleteImg(id) {
      foo...
   }

}

but, when i click on the created href, i received this error

deleteImg is not defined

i have to put the deleteImg function out the $(document).ready() to working it

why?

many thanks!

Answer 1

When a string version of a function is called, like in onclick="deleteImg(id)" it executes in the global context, meaning it’s basically looking for :

window.deleteImg

But it isn’t there, it’s only defined in your document.ready handler’s scope. You’re better off binding the handler directly, like this:

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

Or, store it in data on the element if it’s used for other things, like this:

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

Or, combine it all, and access it that way as well:

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