बूटस्ट्रैप पॉपओवर

Question

के अंदर इंटरैक्टिव तत्वों का उपयोग करके मैं एक लिंक क्लिक पर बूटस्ट्रैप पॉपओवर का सफलतापूर्वक उपयोग कर रहा हूं। मेरे पास पॉपओवर के अंदर कुछ फॉर्म तत्व हैं: एक टेक्स्टफील्ड, चेकबॉक्स और एक बटन। मैं jquery.live() का उपयोग कर एक बटन श्रोता संलग्न करने में सक्षम हूं, लेकिन उस बटन श्रोता के अंदर मुझे सही फॉर्म तत्वों तक कोई पहुंच नहीं है। वे मौजूद हैं यदि मैं उन्हें कंसोल लॉग में ढूंढता हूं, लेकिन उनके मान हमेशा मूल डिफ़ॉल्ट रहते हैं, इसलिए यदि मैं $ ('# txtcomment') जाता हूं। Val(); स्ट्रिंग हमेशा समान होती है, भले ही मैंने मैदान में क्या रखा हो।

क्या कोई उदाहरण, ट्यूटोरियल या स्रोत कोड है जो मैं बूटस्ट्रैप पॉपओवर के अंदर किसी प्रकार की इंटरएक्टिविटी का उपयोग कर रहा हूं?

इस

है कि कैसे मैं पॉपओवर सेट कर रहा हूं:

this.commentLink.popover({ 
    trigger: 'manual', 
    placement: 'right', 
    html : true, 
    content: function() { 
    return $('#commentPopout').html(); 
    } 
}).popover('hide'); 

//jquery.on won't work here so we use live 
$('#btnSubmitComment').live('click', this.proxy(this.commentSubmitClick)); 

तो मैं यह कर रहा हूँ सफलतापूर्वक यह दिखाने के लिए:

this.commentLink.popover('show'); 

और इस बटन को क्लिक समारोह है:

commentSubmitClick: function(e){ 
    console.log($('#txtComment').val());//always shows default text regardless of what I've actually typed in the field 
} 

Answer 1

हाँ! पता लगा लिया। क्यों, ओह यह दस्तावेज क्यों नहीं है? मुझे actioncript में काम करना याद आती है।

var popover = this.commentLink.data('popover').$tip; 
var comment = popover.find('#txtComment').val();//gives correct string 

यह कोड तब चलाना चाहिए जब पॉपओवर वास्तव में दिखाई दे, क्योंकि जब तत्व दिखाई नहीं दे रहे हैं तब तत्व मौजूद नहीं हैं।

-ओह, और jquery.live() का उपयोग बहिष्कृत किया गया है, लेकिन आप पॉपओवर बनने के बाद बटन संदर्भ प्राप्त करने के लिए इस $ टिप चर का उपयोग कर सकते हैं।

Answer 2

वाक्यविन्यास बदल गया। Kalin C Ringkvist का जवाब थोड़ा संशोधित करने की आवश्यकता है:

var popover = this.commentLink.data('popover').tip(); 

नोट विधि tip()$tip के बजाय।

Answer 3

बटन/लिंक है कि घटनाओं आबद्ध के परिवर्तनशील के लिए, यहाँ है मैं कैसे किया यह (बंद जा रहा क्या पहले से जवाब दिया गया है):

var list = $('<ul/>'); 
myCollections.items.each(function(item){ 
    var row = $('<li/>'); 
    row.append(item.get('id'))); 
    row.append($('<a/>').addClass('delete').html('remove')); 
    list.append(row); 
}); 

$(this.el).find('a').popover({ content: list }).on('click', function(){ 
    var popover = $(this).data('popover').tip(); 
    $(popover).find('.delete').on('click', removeitem); 
}); 

function removeitem(){ // code to remove the item here } 

// The HTML (in the popover) would look like this: 
<ul> 
    <li>1<a class="delete">remove</a></li> 
    <li>2<a class="delete">remove</a></li> 
    <li>3<a class="delete">remove</a></li> 
</ul> 

Answer 4

मैं एक चाल का इस्तेमाल किया करने के लिए कार्य करता है संलग्न करने के लिए सक्षम होने के लिए पॉपओवर में तत्व। मैंने तत्व पर एक और क्लिक श्रोता जोड़ा जो पॉपओवर प्रदर्शित करता है। क्लिक श्रोता में कुछ टाइमआउट के साथ एक फ़ंक्शन प्रारंभ होता है (उदाहरण के लिए 500 मिलीसेकंड)। फ़ंक्शन शुरू होने के बाद, आपको अपने पॉपओवर तत्वों तक पहुंचने में सक्षम होना चाहिए। यहां कोड है:

 <!-------- HTML -----------> 
     <a class="btn" id="popover_btn">show popover</a> 

     /******* JAVASCRIPT *******/ 
     $('#popover_btn').popover({ 
      html: true, 
      placement: 'top', 
      trigger: 'click', 
      title: 'add new value', 
      content: '<input id="ttt" type="text"/>' 
     }); 

     $('#popover_btn').click(function() { 
      setTimeout(function() { 
       // here you can write your "ON SHOW" code 
       console.debug($('#ttt').length);  // Outputs 1 - the element is there 
      }, 500); 
     });