Jquery .on ('परिवर्तन') गतिशील रूप से जोड़ा तत्वों

Question

के लिए फायरिंग नहीं

तो मैं निम्नलिखित संरचना

<div class="editCampaignBanner"> 
    <div> 
    <hr> 
    <label for="file">Upload a new image</label> 
    <input id="file" type="file" name="file" class="valid"> 
    <label for="NewImageURLs">Link URL (Optional)</label> 
    <input id="NewImageURLs" type="text" value="" name="NewImageURLs"> 
    <hr> 
    </div> 
</div> 

के साथ एक पृष्ठ मिल गया है और मैं कुछ jQuery इस प्रकार लिखा है:

$('div.editCampaignBanner input:file').on('change', function() { 
     var value = $(this).val(); 
     var div = $(this).parent(); 
     var html = '<div>'+ div.html() + '</div>'; 
     if (value.length > 0) { 
      div.after(html); 
     } 
     else if ($(this) > 1) { 
      div.remove(); 
     } 
    }); 

<div class="editCampaignBanner"> 
     <div> 
     <hr> 
     <label for="file">Upload a new image</label> 
     <input id="file" type="file" name="file" class="valid"> 
     <label for="NewImageURLs">Link URL (Optional)</label> 
     <input id="NewImageURLs" type="text" value="" name="NewImageURLs"> 
     <hr> 
     </div> 
     <div> 
     <hr> 
     <label for="file">Upload a new image</label> 
     <input id="file" type="file" name="file" class="valid"> 
     <label for="NewImageURLs">Link URL (Optional)</label> 
     <input id="NewImageURLs" type="text" value="" name="NewImageURLs"> 
     <hr> 
     </div> 
    </div> 

लेकिन अब, घटना जा रहा है फिर से के बावजूद:

इसलिए जब मैं फ़ाइल में एक तत्व में प्रवेश यह पिछले एक के तहत एक div उत्पन्न करता है .on() का उपयोग करके जिस्टर्ड div में दूसरी फ़ाइल इनपुट घटना को आग नहीं करता है। मैं क्या खो रहा हूँ?

Answer 1

बदलें

$('div.editCampaignBanner input:file').on('change', function() { 

$('div.editCampaignBanner').on('change', 'input:file', function() { 

Answer 2

द्वारा इस प्रयास करें:

$('div.editCampaignBanner').on('change','input:file', function() { 
     var value = $(this).val(); 
     var div = $(this).parent(); 
     var html = '<div>'+ div.html() + '</div>'; 
     if (value.length > 0) { 
      div.after(html); 
     } 
     else if ($(this) > 1) { 
      div.remove(); 
     } 
    }); 

Answer 3

$(document).delegate("div.editCampaignBanner input:file", "change", function() { 
    //code goes here 
}); 


$(document).on('change', 'div.editCampaignBanner input:file', function() { 
//code goes here 
}); 

सभी तत्वों को 012 से मेल के लिए एक या अधिक घटनाओं के लिए कोई हैंडलर संलग्नचयनकर्ता, अब या भविष्य में, रूट तत्वों के एक विशिष्ट सेट के आधार पर। JQuery 1.7 के रूप में, .delegate() को .on() विधि द्वारा हटा दिया गया है। हालांकि, पुराने संस्करणों के लिए, यह घटना प्रतिनिधिमंडल का उपयोग करने का सबसे प्रभावी माध्यम है। घटना बाध्यकारी और प्रतिनिधिमंडल पर अधिक जानकारी .on() विधि में है।

Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

Answer 4

उपयोग हो सकता है $.live() jQuery विधि, अपने पदावनत लेकिन मेरे लिए काम करता है:

$('div.editCampaignBanner input:file').live('change', function() { 
     var value = $(this).val(); 
     var div = $(this).parent(); 
     var html = '<div>'+ div.html() + '</div>'; 
     if (value.length > 0) { 
      div.after(html); 
     } 
     else if ($(this) > 1) { 
      div.remove(); 
     } 
    }); 

अधिक जानकारी: http://api.jquery.com/live/

यदि आप नवीनतम प्रयोग पर अनिच्छुक रहे हैं (.on()) इस तरह इसका उपयोग करें:

function fileChanged(ele){ 
    var value = ele.val(); 
    var div = ele.parent(); 
    var html = '<div>'+ div.html() + '</div>'; 
    if (value.length > 0) { 
     div.after(html); 
    } 
    else if (ele > 1) { 
     div.remove(); 
    } 
    $('div.editCampaignBanner').unbind().on('change','input:file', function() { 
     fileChanged($(this)) 
    }); 
} 
$(function(){ 
    $('div.editCampaignBanner').on('change','input:file', function() { 
     fileChanged($(this)) 
    }); 
});