चहचहाना बूटस्ट्रैप पॉपओवर में बटन के लिए ईवेंट हैंडलर संलग्न

Question

मैं चहचहाना बूटस्ट्रैप R आर उपयोग कर रहा हूँ,

पॉपओवर में मैं एक बटन जोड़ने रहा हूँ,

मैं बटन के लिए कोई click हैंडलर साथ जोड़ने की आवश्यकता, लेकिन जिस तरह से पॉपओवर काम करता है, हर बार यह दिखाता है कि यह तत्व को हटाता/छुपाता है, बजाय इसे दिखाने/छिपाने के बजाए, इसलिए मैंने कहा बटन से जुड़े किसी भी ईवेंट हैंडलर को हटा दें।

मैं बटन के अपने संस्करण के साथ कई पॉपओवर बना रहा हूं, इसलिए केवल पॉपओवर में कक्षा लागू करना काम नहीं करेगा (जब तक कि मैं प्रत्येक के लिए एक अलग वर्ग उत्पन्न नहीं करता: /), बटन हो सकता है या नहीं इसकी अपनी आईडी है, इसलिए आईडी लागू नहीं कर सकता है।

मैं ट्विटर बूटस्ट्रैप पॉपओवर की सामग्री में किसी ईवेंट को ईवेंट हैंडलर कैसे लागू कर सकता हूं?

Answer 1

मैं एक ही समस्या थी, और, मेरे मामले में, $(body).on('click') वैकल्पिक हल काम नहीं करेगा, के बाद से एप्लिकेशन में बहुत सारे बटन क्लिक करें।

मैंने इसके बजाय निम्नलिखित किया। इस तरह, हम प्रतिनिधि कार्यक्रम के दायरे को केवल पॉपओवर तत्व के माता-पिता तक ही सीमित कर सकते हैं।

$('a.foo').popover({ 
    html: true, 
    title: 'Hello', 
    placement: 'bottom', 
    content: '<button id="close-me">Close Me!</button>' 
}).parent().delegate('button#close-me', 'click', function() { 
    console.log('World!'); 
}); 

जे एस फिडल: http://jsfiddle.net/dashk/5Yz7z/

पी.एस. मैंने इस तकनीक का उपयोग अपने आवेदन में Backbone.View के भीतर किया था। यहाँ फिडल में कोड का स्निपेट है, मामले में आप के रूप में अच्छी Backbone.js में इस का उपयोग कर रहे ...: http://jsfiddle.net/dashk/PA6wY/

संपादित बूटस्ट्रैप 2.3 में, आप एक लक्ष्य रखे होते हैं जहां पॉपओवर में जोड़ दिया जाएगा निर्दिष्ट कर सकते हैं। अब, .parent() लोकेटर करने के बजाय, आप घटनाओं को विशेष रूप से कंटेनर में भी सुन सकते हैं ... यह श्रोता को और भी विशिष्ट बना सकता है (कल्पना करें कि एक डीआईवी बनाना जो केवल पॉपओवर को शामिल करने के लिए मौजूद है।)

Answer 2

यह करना चाहिए। यह किसी भी मौजूदा और भावी बटन एक तत्व के अंदर बनाया तत्वों .popover वर्ग के साथ की देखभाल करेंगे:

$('body').on('click', '.popover button', function() { 
    // code here 
}); 

Answer 3

इस

var content = function() { 
    var button = $($.parseHTML("<button id='foo'>bar</button>")); 
    button.on('click', '#foo', function() { 
     console.log('you clicked me!'); 
    }); 
    return button; 
}; 

$('#new_link').popover({ 
    "html": true, 
    "content": content, 
}); 

Answer 4

$('.btn-popover').parent().delegate('button#close-me','click', function(){ 
    alert('Hello'); 
}); 

डेटा विशेषताओं स्थिर html में स्थापित कर रहे हैं, तो उपरोक्त विधि ठीक काम करता है की कोशिश करो। धन्यवाद :)

Answer 5

बस थोड़ा सा DashK का बहुत अच्छा जवाब अपडेट करने के लिए: .delegate() को jQuery 1.7 के रूप में .on() द्वारा हटा दिया गया है (here देखें)।

$('a.foo').popover({ 
    html: true, 
    title: 'Hello', 
    placement: 'bottom', 
    content: '<button id="close-me">Close Me!</button>' 
}).parent().on('click', 'button#close-me', function() { 
    console.log('World!'); 
}); 

यहाँ jsfiddle देखें: http://jsfiddle.net/smingers/nCKxs/2/

मैं भी $ ('a.foo') को .on() विधि चेनिंग के साथ कुछ मुद्दों पड़ा है; यदि आप इस तरह में समस्या आ रही,, उदा दस्तावेज़, शरीर, या html में जोड़कर देखें .:

$('a.foo').popover({ 
    html: true, 
    title: 'Hello', 
    placement: 'bottom', 
    content: '<button id="close-me">Close Me!</button>' 
}); 

$('body').on('click', 'button#close-me', function() { 
    console.log('World!'); 
}); 

Answer 6

आप मुसीबत में अगर आप एक बाहरी घटक उदाहरण के लिए पॉपओवर की सामग्री में और अधिक जटिल संरचना जोड़ने के लिए, प्राप्त कर सकते हैं। इस मामले के लिए, यह चाल करना चाहिए।

var content = $('<button>Bingo?</button>'); 
content.on('click', function() { 
    alert('Bingo!') 
}); 

$('a.foo').popover({ 
    html: true, 
    content: content 
}).on('hidden.bs.popover', function() { 
    content.detach(); # this will remove content nicely before the popover removes it 
}); 

Answer 7

बहुत सरल उपाय है कि मेरे लिए काम किया है:

// suppose that popover is defined in HTML 
$('a.foo').popover(); 

// when popover's content is shown 
$('a.foo').on('shown.bs.popover', function() { 
    // set what happens when user clicks on the button 
    $("#my-button").on('click', function(){ 
     alert("clicked!!!"); 
    }); 
}); 

// when popover's content is hidden 
$('a.foo').on('hidden.bs.popover', function(){ 
    // clear listeners 
    $("#my-button").off('click'); 
}); 

क्यों इस काम करता है: मूल रूप से पॉपओवर की सामग्री नहीं श्रोता जब तक पॉपओवर खोला जाता है है।

जब पॉपवर दिखाया जाता है, बूटस्ट्रैप अपनी घटना shown.bs.popover निकालता है। हम jQuery on विधि का उपयोग कर इस घटना पर एक ईवेंट हैंडलर $(a.foo) पर संलग्न कर सकते हैं। तो जब पॉपओवर दिखाया जाता है, हैंडलर (कॉलबैक) फ़ंक्शन कहा जाता है। इस कॉलबैक में, हम ईवेंट हैंडलर को पॉपओवर की सामग्री में संलग्न कर सकते हैं - उदाहरण के लिए: जब उपयोगकर्ता पॉपओवर के अंदर इस बटन पर क्लिक करता है तो क्या होता है।

पॉपओवर बंद होने के बाद, सभी संलग्न हैंडलर को पॉपओवर की सामग्री में निकालना अच्छा विचार है। यह hidden.bs.popover हैंडलर के माध्यम से किया जाता है, जो jQuery .off विधि के साथ हैंडलर को हटा देता है। यह पॉपओवर के अंदर ईवेंट हैंडलर को दो बार (और अधिक) कहा जाता है जब पॉपओवर फिर से खोला जाता है ...