Обработчики событий для выпадающих списков Twitter Bootstrap?

попробуйте это:

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

в выпадающем списке Bootstrap 3'.Яш' предоставляет нам различные события.

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

etc

вот рабочий пример того, как вы могли бы реализовать пользовательские функции для ваших якорей.

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
});

кто-нибудь здесь ищет нокаут JS интеграции.

учитывая следующий HTML (стандартная кнопка раскрывающегося списка Bootstrap):

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

используйте следующие JS:

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

обратите внимание, что наблюдаемый элемент массива неявно передается в щелкните обработчик функций для использования в модели представления код.

Я смотрел на это. При заполнении выпадающих якорей я дал им класс и атрибуты данных, поэтому при необходимости выполнить действие вы можете сделать:

<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"));
});

поэтому, если у вас есть динамически генерируемые элементы списка в раскрывающемся списке и вам нужно использовать данные, которые не являются только текстовым значением элемента, вы можете использовать атрибуты данных при создании раскрывающегося списка, а затем просто дать каждому элементу с классом событие, вместо того, чтобы ссылаться на идентификаторы каждого элемента и генерировать событие click.

без необходимости менять группу кнопок на всех, вы можете сделать следующее. Ниже, я предполагаю, что ваш выпадающий button есть id на 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>

теперь, если вы выберите .btn-group самого этого пункта, чтобы иметь id на fldCategory, это на самом деле более эффективный 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>