Jquery img संलग्न के माध्यम से जोड़ा() चलाता है ऑनलोड दो बार

Question

कोड है कि मेरे लिए सिरदर्द पैदा करता है बल्कि सरल है:

$(function(){ 
$("#test").append('<img onload="alert(\'hi\')" src="Image.jpg"/>'); 
}) 

मैं में मेरे सिर में ऊपर कोड और आईडी 'परीक्षण' के साथ एक div है तन। अब मेरी समस्या यह है कि जब छवि लोड हो जाती है तो पृष्ठ दो अलर्ट उत्पन्न करता है, लेकिन मुझे उम्मीद है कि इसे केवल 'ओलोड' के रूप में केवल एक ही उत्पादित किया जाना चाहिए- जिस तरह से यह होता है जब मैं बिना किसी जावास्क्रिप्ट के छवि को मैन्युअल रूप से जोड़ता हूं ..
बेला मैं में किए गए देखें: http://jsfiddle.net/9985N/

किसी भी मदद/स्पष्टीकरण बहुत सराहना कर रहा है ...

Answer 1

UPDATED (क्योंकि कुछ लोगों ने मुझे, lol विश्वास नहीं करते)

क्योंकि .append पहले नोड बनाता है और फिर एम यह उचित स्थिति में oves। तत्व जोड़कर पहले तो इस प्रकार उसके गुण जोड़ने का प्रयास करें:

$(function() { 
    $("#test").append(
     $("<img />").attr({ 
      src: "http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg", 
      onload: "alert(\'hi\')" 
     }) 
    ); 
}); 

मेरा जवाब समस्या नहीं "से बचने" है, यह यह बहुत सीधे जवाब। यदि आप jQuery.js फ़ाइल को असंपीड़ित प्रारूप में खोलते हैं तो आप स्पष्ट रूप से देख सकते हैं कि .append उस दस्तावेज़ पर node बनाता है जो onload ईवेंट को पहली बार बुलाया जाता है और फिर shifts इसे उस स्थिति में रखता है जिसे इसे फिर से कहा जाता है। शायद शिफ्ट गलत शब्द है, मुझे क्षमा करें क्योंकि शब्दावली मेरा मजबूत सूट नहीं है। हालांकि यदि आप कोड का पालन करते हैं तो आप इसकी रचना और उसके आंदोलन को देखते हैं, हालांकि इसे स्थानांतरित करने के लिए फिर से एपेंड का उपयोग करने के लिए ऐसा नहीं कहा जाता है, क्योंकि नोड पहले से ही बनाया गया है, यह केवल एक तत्व से दूसरी तरफ अधिभार की आवश्यकता नहीं है। जैसा कि मैंने कहा, सर्वोत्तम शब्दावली सुनिश्चित नहीं है, लेकिन jQuery.js पर इसका पालन करना बहुत आसान है।

मेरा विश्वास नहीं है? MSIE9, FF12, & GoogleChrome20 में 0 समस्याओं के साथ बस निम्नलिखित fiddle का परीक्षण किया।

jsFiddle

बस FYI करें, यह वास्तव में एक भयानक अभ्यास है, लेकिन मैं लोगों jQuery में हर समय और पराजय उस तरह का उद्देश्य HTML का पूरा लाइनों बारे में देखते हैं। यह एक पुस्तकालय है जिसमें उद्देश्य पर पढ़ने के लिए कई किताबें हैं। कभी-कभी HTML की एक पूर्ण पंक्ति आसान लगती है, लेकिन यह तेज़ नहीं हो सकता है क्योंकि यह आपके लिए किए गए सभी बेहतरीन लेआउट कार्यों का पालन नहीं करता है। विचार "कम लिखें, और करें" और इसमें HTML शामिल है। आखिरकार, यदि आप एचटीएमएल की पूरी लाइन लिखने वाले थे, तो jQuery का उपयोग क्यों करें जब आप इसे PHP में डाल सकें !? : पी बस एक विचार।

Answer 2

या इस:

var img = $('<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg"/>').on('load', function(){ 
    $('#test').append(img); 
    alert('loaded'); 
});