$ sur ('document'). (prêt)

Question

J'ai ce code simple

$(document).ready(function(){ 

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

    function deleteImg(id) { 
     foo... 
    } 

} 

mais, quand je clique sur le href créé, j'ai reçu cette erreur

deleteImg is not defined 

je dois mettre la fonction deleteImg dehors le $ (document) .ready() pour le travailler

pourquoi?

merci beaucoup!

Answer 1

Lorsqu'une version de chaîne d'une fonction est appelée, comme dans onclick="deleteImg(id)" il exécute dans le contexte mondial, ce qui signifie qu'il cherche essentiellement pour:

window.deleteImg 

Mais il n'y est pas, il est défini que dans votre document.ready portée du gestionnaire. Vous êtes mieux lier le gestionnaire directement, comme ceci:

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

Ou, stocker des données sur l'élément s'il est utilisé pour d'autres choses, comme ceci:

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

Ou, combiner tous, et y accéder ainsi:

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

Answer 2

function foo() { 
    function bar() { alert("Hello!"); } 
    var baz = 123; 
} 

Dans l'extrait ci-dessus, la fonction bar est une fonction locale -foo. C'est exactement la même chose que la variable baz est une variable locale à la fonction foo: vous ne pouvez pas accéder à baz en dehors de foo et vous ne pouvez pas accéder à bar en dehors de foo exactement de la même manière.

Answer 3

En raison de la portée. deleteImg est déclaré à l'intérieur de votre fonction anonyme ready() et n'est pas défini à l'extérieur.

Answer 4

deleteImg est local à la fermeture de la fonction que vous alimentez $ (document) .ready(). Essayez ceci à la place:

window.deleteImg = function(id) { 
    foo... 
} 

Answer 5

De même, vous pouvez utiliser jQuery pour ajouter l'événement click.

$.ajax({ 
    success: function(id) { 
     $('#ele').append('<a href="" class="deleteImg">'); 
     $('.deleteImg').click(function() { 
     window.deleteImg($(this).id); 
     }); 
    } 
}) 

Il peut sembler un peu exagéré, mais si le code devient plus compliqué, ou même la façon dont il est maintenant, il est généralement une bonne idée de garder à Javascript et HTML en dehors autant que possible. C'est l'une des principales raisons d'utiliser jQuery en premier lieu.