बूटस्ट्रैप पॉपओवर, पॉपओवर अंदर बटन को पकड़ने .click नहीं

Question

सबसे पहले, समस्या का एक बेला: jsfiddle.net

मैं एक पॉपओवर का उपयोग कर रहा है, और यह सामग्री एचटीएमएल, वर्ग "click_me" के साथ एक बटन है। मेरे पास "click_me" पर क्लिक करने के लिए jquery है और इसे एक चेतावनी फेंकनी चाहिए। हालांकि, यह नहीं है। क्या मैं कुछ भूल रहा हूँ?

जे एस:

jQuery(document).ready(function($) { 

$('.demo_button').click(function() { 
    $(this).popover({ 
       html: true, 
       trigger: 'manual', 
       placement: 'right', 
       content: function() { 
        var $buttons = $('#popover_template').html(); 
        return $buttons; 
       } 
    }).popover('toggle'); 
}); 

$('.click_me').click(function() { 
    alert('it works!'); 
}); 

}); 

HTML:

<button class="btn btn-primary demo_button">Click here</button> 

<div id="popover_template"> 
    <button class="btn click_me">Make Alert</button> 
</div> 

Answer 1

.click() केवल तत्वों है कि मौजूद हैं लोड पर आप पर उपयोग करने की आवश्यकता()

$(document).on("click", ".click_me", function() { 
    alert('it works!'); 
}); 

Answer 2

के लिए काम करेंगे आपकी समस्या यह है कि आप किसी ऐसे ईवेंट को एक ईवेंट संलग्न कर रहे हैं जो उस ईवेंट को प्राप्त करने के लिए तैयार नहीं है। आपको ईवेंट को मूल तत्व में संलग्न करना चाहिए, फिर आप तत्व के लिए फ़िल्टर कर सकते हैं। इस तरह इससे कोई फर्क नहीं पड़ता कि आपका क्लिक करने योग्य तत्व कब दिखाता है, यह काम करेगा।

<div class="container"><br /> 
    <button class="btn btn-primary demo_button">Click here</button> 

    <div id="popover_template"> 
     <button class="btn click_me">Make Alert</button> 
    </div> 
</div> 

$('.container').on("click", ".click_me", function() { 
    alert('it works!'); 
}); 

यह भी करते समय, इसे किसी ऐसे माता-पिता से संलग्न न करें जो पेड़ पर बहुत अधिक हो। आप इसे निकटतम संभावित मूल तत्व से जोड़ना चाहते हैं। हमें document जैसे किसी पर क्लिक ईवेंट की आवश्यकता नहीं है क्योंकि यह एक अच्छा विचार है कि इस तत्व को कौन सा तत्व मिलेगा। इसे document पर संलग्न करने का अर्थ यह होगा कि click_me की कक्षा में कोई भी तत्व सक्षम होगा और उसी कोड का जवाब देगा। यदि आप अलग-अलग बटनों में अलग-अलग कार्यक्षमता चाहते हैं, तो आप नहीं कर सकते हैं, क्योंकि वे सभी document से जुड़े एक ही कोड का जवाब दे रहे हैं।

बीटीडब्ल्यू यहां आपका fiddle है।

Answer 3

आप निम्न प्रयास करना चाहिए:

jQuery(document).ready(function($) { 

    $('.demo_button').click(function() { 
     $(this).popover({ 
       html: true, 
       trigger: 'manual', 
       placement: 'right', 
       content: function() { 
        var $buttons = $('#popover_template').html(); 
        return $buttons; 
       } 
     }).popover('toggle'); 
     $('.click_me').off('click').on('click', function() { 
      alert('it works!'); 
     }); 
    }); 
}); 

जब डोम तैयार है, आप बटन यह अभी तक नहीं बनाया गया है कर रहे हैं, यह कर, हर पॉपओवर बढ़ जाता है जब आप अपने बनाए गए बटन पर घटना को संभाल लेंगे।

Answer 4

उपयोग करें: show.bs.popover - शो इवेंट विधि कहलाते समय यह घटना तुरंत आग लगती है।

$('#myPopover').on('hidden.bs.popover', function() { 
    // bind your button click event here 
})