Event-Handler für Twitter Bootstrap-Dropdowns?

Ich möchte eine Twitter Bootstrap Dropdown-Schaltfläche verwenden :

    <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 -->

Wenn der Benutzer den Wert der Schaltfläche in "Eine andere Aktion" ändert, anstatt einfach zu navigieren #, möchte ich die Aktion auf benutzerdefinierte Weise behandeln.

Aber ich kann keine Event-Handler im Dropdown-Plugin dafür sehen.

Ist es tatsächlich möglich, Bootstrap-Dropdown-Schaltflächen zu verwenden, um Benutzeraktionen auszuführen? Ich frage mich, ob sie nur für die Navigation gedacht sind - es ist verwirrend, dass das Beispiel eine Liste von Aktionen enthält.

Twitter Bootstrap soll eine Basisfunktionalität bieten und bietet nur grundlegende Javascript-Plugins, die etwas auf dem Bildschirm tun . Alle zusätzlichen Inhalte oder Funktionen müssen Sie selbst vornehmen.

<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 -->

und dann mit jQuery

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

Versuche dies:

$('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;
});

In Bootstrap 3 liefert uns 'dropdown.js' die verschiedenen Ereignisse, die ausgelöst werden.

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

etc

Hier ist ein funktionierendes Beispiel dafür, wie Sie benutzerdefinierte Funktionen für Ihre Anker implementieren können.

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

Sie können Ihrem Anker eine ID hinzufügen:

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

Verwenden Sie dann den Klickereignis-Listener von jQuery, um auf die Klickaktion zu warten und Ihre Funktion auszulösen:

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

Ich habe mir das angeschaut. Beim Auffüllen der Dropdown-Anker habe ich ihnen eine Klasse und Datenattribute zugewiesen. Wenn Sie also eine Aktion ausführen müssen, können Sie Folgendes tun:

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

und dann in der jQuery so etwas wie:

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

Wenn Sie also dynamisch Listenelemente in Ihrer Dropdown-Liste generiert haben und die Daten verwenden müssen, die nicht nur der Textwert des Elements sind, können Sie die Datenattribute beim Erstellen des Dropdown-Listenelements verwenden und dann jedem Element mit der Klasse die geben Ereignis, anstatt auf die IDs jedes Elements zu verweisen und ein Klickereignis zu generieren.

Jeder hier, der nach Knockout JS-Integration sucht.

Bei folgendem HTML (Standard Bootstrap Dropdown Button):

<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>

Verwenden Sie das folgende JS:

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

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

Für diejenigen, die Dropdown-Optionen basierend auf einem beobachtbaren Knockout-Array generieren möchten, würde der Code ungefähr so ​​aussehen:

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 -->

Beachten Sie, dass das beobachtbare Array-Element implizit zur Verwendung im Ansichtsmodellcode an den Klickfunktionshandler übergeben wird.

Ohne Ihre Schaltflächengruppe ändern zu müssen, können Sie Folgendes tun. Unten gehe ich davon aus, dass Ihr Dropdown buttonein idvon hat fldCategory.

<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>

Wenn Sie das .btn-groupvon diesem Element selbst so einstellen , dass es das idvon fldCategoryhat, ist das tatsächlich effizienter und läuft etwas schneller:

<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>