JQuery - जोड़े onclick गतिशील रूप से उत्पन्न करने के लिए img टैग

Question

मैं कई छवि बनाने हूँ गतिशील निम्नलिखित कोड का उपयोग कर:

function refresh_gallery(galleryidentifier, albumid) { 
    $.ajax({ type: "POST", url: "/Photos/Thumbnails/" + albumid + "/", data: {}, success: function(msg) { 
     try { 
      var fotos = eval(msg); $(galleryidentifier).empty(); if (fotos.length == 0) { $(galleryidentifier).html("Press "Add files..." and select files to upload!"); return true; } 
      for (var f in fotos) { 
       //this image needs the onclick eventhandler 
       $(document.createElement("img")).attr({ src: '/images/delete.gif', title: 'Delete ' + fotos[f].Title }).addClass("icon_delete").appendTo(galleryidentifier); ; 
       $(document.createElement("img")).attr({ src: fotos[f].ThumbnailPath, title: fotos[f].Title }).addClass("thumbnail").appendTo(galleryidentifier); 
      } 
      var del_div = $(document.createElement("div")).css({ "padding": "4px" }).appendTo(galleryidentifier); 
      var delete_span = $(document.createElement("span")).click(delete_files(albumid)).css({ "cursor": "pointer", "font-size": "12px" }).appendTo(del_div); 
      $(document.createElement("img")).attr({ "src": "/Content/images/delete.png" }).appendTo(delete_span); 
      $(document.createTextNode("delete all")).appendTo(delete_span); 
      return true; 
     } 
     catch (e) { 
      alert(e); 
     } 
     alert("Refresh error!"); 
    }, error: function() { alert("Refresh error!"); } 
    }); 
} 

छवियों की पीढ़ी ठीक काम कर रहा है, लेकिन मैं पहले करने के लिए एक onclick eventhandler जोड़ना चाहते हैं छवि उत्पन्न हो रही है (कोड में टिप्पणी देखें)। मैं यह कैसे कर सकता हूं? मैं JQuery के लिए बिल्कुल नया हूँ।

धन्यवाद!

Answer 1

$(document.createElement("img")) 
    .attr({ src: '/images/delete.gif', title: 'Delete ' + fotos[f].Title }) 
    .addClass("icon_delete") 
    .appendTo(galleryidentifier) 
    .click(function(){ 
     // Do something 
    }) 

Answer 2

आप एक ही तरीका है कि आप सीएसएस वर्ग जोड़ा में click समारोह का उपयोग कर इस प्रकार की एक ईवेंट हैंडलर जोड़ सकते हैं।

Answer 3

तुम सिर्फ एक वर्ग जब addClass() विधि के साथ अपने छवि बनाने बना सकते हैं। और कहीं और की तरह

$(document).ready(
    $("img.toBeClicked").click(function() { 
    //some code 
    }; 
}; 

Answer 4

कुछ है jQuery एक विधि बुलाया क्लिक किया है, एक कॉलबैक समारोह है जो करने के लिए तर्क। इस उदाहरण में, मैं भी एक छवि तत्व बनाने के लिए एक (बहुत) सरल आशुलिपि का उपयोग करने के लिए जा रहा हूँ:

$('<img/>').click(function() { 
    // do something 
}).attr({ 
    src: '/images/delete.gif', 
    title: 'Delete ' + fotos[f].Title 
}).addClass("icon_delete").appendTo(galleryidentifier); 

Answer 5

कभी jQuery 1.4 के बाद से आप एक तत्व बना सकते हैं और सभी atrributes जोड़ सकते हैं/यह करने के लिए घटनाओं बनाते समय।

चित्र टैग के मामले में आप लिखते हैं:

$('<img/>', { 
    src:  '/images/delete.gif', 
    title: 'Delete ' + fotos[f].Title, 
    'class': 'icon_delete', // in quotes because class is a reserved js word 
    click: function(e){ 
     // Everything here happens when you click the image. 
    } 
}).appendTo(galleryidentifier); 

example ऊपर JSBin में।

यहाँ डॉक्स reference है।

ऐसा क्यों है jQuery का उपयोग कर एक छवि बनाने के अन्य तरीकों की तुलना में बेहतर है:

• एक दर्जन से अधिक तरीकों चेनिंग की तुलना में बहुत क्लीनर।
• आपको विभिन्न गुणों के साथ ऑब्जेक्ट्स भेजने की अनुमति देता है।
• तत्व एक नियमित रूप से एचटीएमएल "हार्ड कोडित" के साथ अच्छी तरह से ऊपर से मेल खाता है।