इवेंट हैंडलर?

Question

मैं एक Twitter Bootstrap dropdown button उपयोग करना चाहते हैं:

<div class="btn-group"> 
     <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     </ul> 
    </div><!-- /btn-group --> 

उपयोगकर्ता के लिए बटन 'एक और कार्रवाई' का मान बदल दे बस # पर नेवीगेट करने के बजाय, मैं वास्तव में में कार्यवाही को प्रबंधित करना चाहते हैं एक कस्टम तरीका।

लेकिन ऐसा करने के लिए मुझे कोई ईवेंट हैंडलर in the dropdown plugin नहीं दिखाई दे रहा है।

क्या उपयोगकर्ता क्रियाओं को संभालने के लिए बूटस्ट्रैप ड्रॉपडाउन बटन का उपयोग करना वास्तव में संभव है? मुझे आश्चर्य हो रहा है कि क्या वे केवल नेविगेशन के लिए हैं - यह भ्रमित है कि उदाहरण क्रियाओं की एक सूची देता है।

Answer 1

ट्विटर बूटस्ट्रैप एक आधारभूत कार्यक्षमता देने के लिए होती है, और केवल बुनियादी जावास्क्रिप्ट वाले प्लग इन स्क्रीन पर कुछ करना प्रदान करता है। कोई भी अतिरिक्त सामग्री या कार्यक्षमता, आपको स्वयं करना होगा।

<div class="btn-group"> 
    <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
    <li><a href="#" id="action-1">Action</a></li> 
    <li><a href="#" id="action-2">Another action</a></li> 
    <li><a href="#" id="action-3">Something else here</a></li> 
    </ul> 
</div><!-- /btn-group --> 

और फिर jQuery

jQuery("#action-1").click(function(e){ 
//do something 
e.preventDefault(); 
}); 

Answer 2

साथ यहां अपने लंगर के लिए कस्टम कार्यों को लागू कर सकता है की एक काम उदाहरण है।

http://jsfiddle.net/CH2NZ/43/

आप अपने लंगर के लिए एक आईडी संलग्न कर सकते हैं:

<li><a id="alertMe" href="#">Action</a></li> 

और फिर jQuery के क्लिक करें घटना श्रोता का उपयोग क्लिक कार्रवाई के लिए सुनने के लिए और आग आप काम करते हैं:

$('#alertMe').click(function(e) { 
    alert('alerted'); 
    e.preventDefault();// prevent the default anchor functionality 
}); 

Answer 3

इसे आज़माएं:

$('div.btn-group ul.dropdown-menu li a').click(function (e) { 
    var $div = $(this).parent().parent().parent(); 
    var $btn = $div.find('button'); 
    $btn.html($(this).text() + ' <span class="caret"></span>'); 
    $div.removeClass('open'); 
    e.preventDefault(); 
    return false; 
}); 

Answer 4

यहां कोई भी नॉकआउट जेएस एकीकरण की तलाश में है।

निम्न HTML (मानक बूटस्ट्रैप ड्रॉप-डाउन बटन) को देखते हुए:

<div class="dropdown"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
     Select an item    
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
     <li> 
      <a href="javascript:;" data-bind="click: clickTest">Click 1</a> 
     </li> 
     <li> 
      <a href="javascript:;" data-bind="click: clickTest">Click 2</a> 
     </li> 
     <li> 
      <a href="javascript:;" data-bind="click: clickTest">Click 3</a> 
     </li> 
    </ul> 
</div> 

उपयोग निम्नलिखित जे एस:

var viewModel = function(){ 
    var self = this; 

    self.clickTest = function(){ 
     alert("I've been clicked!"); 
    } 
}; 

लटकती विकल्प उत्पन्न करना चाहते हैं नॉकआउट नमूदार सरणी के आधार पर उन लोगों के लिए, कोड होगा कुछ ऐसा देखें:

var viewModel = function(){ 
    var self = this; 

    self.dropdownOptions = ko.observableArray([ 
     { id: 1, label: "Click 1" }, 
     { id: 2, label: "Click 2" }, 
     { id: 3, label: "Click 3" } 
    ]) 

    self.clickTest = function(item){ 
     alert("Item with id:" + item.id + " was clicked!"); 
    } 
}; 

<!-- REST OF DD CODE --> 
<ul class="dropdown-menu" role="menu"> 
    <!-- ko foreach: { data: dropdownOptions, as: 'option' } --> 
    <li> 
     <a href="javascript:;" data-bind="click: $parent.clickTest, text: option.clickTest"></a> 
    </li> 
    <!-- /ko --> 
</ul> 
<!-- REST OF DD CODE --> 

नोट, कि देखने योग्य सरणी आइटम को दृश्य मॉडल कोड में उपयोग के लिए पर फ़ंक्शन हैंडलर पर निहित रूप से पारित किया गया है।

Answer 5

बूटस्ट्रैप 3 'ड्रॉपडाउन.जेएस' में हमें ट्रिगर किए गए विभिन्न कार्यक्रमों के साथ प्रदान करता है।

click.bs.dropdown 
show.bs.dropdown 
shown.bs.dropdown 

आदि

Answer 6

मैं इस पर देख रहे हैं की है। एंकर ड्रॉप डाउन पॉप्युलेट पर, मैं उन्हें एक वर्ग और डेटा गुण दे दिया है, इसलिए जब एक कार्रवाई करने के लिए की आवश्यकता होगी, आप कर सकते हैं:

<li><a class="dropDownListItem" data-name="Fred Smith" href="#">Fred</a></li> 

और फिर jQuery में की तरह कुछ कर रही:

$('.dropDownListItem').click(function(e) { 
    var name = e.currentTarget; 
    console.log(name.getAttribute("data-name")); 
}); 

इसलिए यदि आपके ड्रॉपडाउन में गतिशील रूप से जेनरेट की गई सूची आइटम हैं और उस डेटा का उपयोग करने की आवश्यकता है जो आइटम का टेक्स्ट मान नहीं है, तो आप ड्रॉपडाउन सूची बनाने के दौरान डेटा विशेषताओं का उपयोग कर सकते हैं और फिर प्रत्येक आइटम को कक्षा के साथ दे सकते हैं घटना, प्रत्येक आइटम की आईडी का जिक्र करने और क्लिक ईवेंट उत्पन्न करने के बजाए।

Answer 7

अपने बटन समूह को बदलने के बिना, आप निम्न कार्य कर सकते हैं। नीचे, मुझे लगता है कि आपकी ड्रॉपडाउन button में idfldCategory है।

<script type="text/javascript"> 

$(document).ready(function(){ 

    $('#fldCategory').parent().find('UL LI A').click(function (e) { 
    var sVal = e.currentTarget.text; 
    $('#fldCategory').html(sVal + ' <span class="caret"></span>'); 
    console.log(sVal); 
    }); 

}); 

</script> 

अब, अगर आप सेट इस मद में ही की .btn-groupfldCategory की id है, जो वास्तव में और अधिक कुशल jQuery है और एक छोटे से तेजी से चलाता है:

<script type="text/javascript"> 

$(document).ready(function(){ 

    $('#fldCategory UL LI A').click(function (e) { 
    var sVal = e.currentTarget.text; 
    $('#fldCategory BUTTON').html(sVal + ' <span class="caret"></span>'); 
    console.log(sVal); 
    }); 

}); 

</script>