0

Bootstrap 2.3.2 ボタンのドロップダウン メニューがあります。ドロップダウン内にチェックボックスとボタンがあります。チェックボックスをクリックした場合、特にボタンをクリックした場合は、ドロップダウンを開いたままにしたいと思います。ボタンの背後にあるアクションが完了したら、ドロップダウンを手動で閉じたいと思います。HTMLは次のとおりです。

<div class="btn-group">
    <input type="hidden" name="order_item_id" value="<?=$item->id?>">
    <button data-toggle="dropdown" class="btn btn-mini dropdown-toggle" data-container="body"><i class="icon icon-plus"></i> Create tasks <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks1" id="form_create_tmpl_tasks1">Order material</label></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks2" id="form_create_tmpl_tasks2">Order accessories</label></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks3" id="form_create_tmpl_tasks3">Order CNC parts</label></li>
      <li class="divider"></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks4" id="form_create_tmpl_tasks4">SW development (confirm delivery)</label></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks5" id="form_create_tmpl_tasks5">HW development (confirm delivery)</label></li>
      <li class="divider"></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks6" id="form_create_tmpl_tasks7">Order ALU</label></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks7" id="form_create_tmpl_tasks8">Mill CNC parts</label></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks8" id="form_create_tmpl_tasks9">Anodize</label></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks9" id="form_create_tmpl_tasks10">Laser gravure</label></li>
      <li class="divider"></li>
      <li class="action"><button type="button" class="btn btn-small btn-create">Create</button></li>
    </ul>
</div>

このコードでチェックボックスをクリックすると、ドロップダウンクローズを無効にすることができました：

$('.dropdown-menu input, .dropdown-menu label').click(function(e) {
    e.stopPropagation();
});

このセレクターにもボタンを含めると、ボタンはクリックイベントを受け取りません。これは望ましくありません。ボタンのクリック時に AJAX 呼び出しを実行したいのですが、結果が得られたらドロップダウンを閉じたいと思います。このようなもの：

$('.btn-create').live('click', function(e){
    e.preventDefault();
    var btn = $(this);
    btn.button('loading');
    $.ajax({
        url: 'url',
        dataType: 'json',
        type: "POST",
        success: function(data) {
            btn.button('reset');
            // close drop down here
        },
        error:function (xhr, ajaxOptions, thrownError){
            btn.button('reset');       
        }
    });
});

これがjsFiddleです。

4

1 に答える 1

1

.click()順番に呼び出されるハンドラを追加することに注意してください。.btn-create伝達を停止するために最初のハンドラーにセレクターを追加すると、stopPropagation()に固有のハンドラーの前にコードが呼び出されます.btn-create。e.stopPropagation();ただし、のクリック ハンドラに含めると、.btn-create期待どおりに動作するはずです。

フィドルを参照してください: http://jsfiddle.net/Palpatim/vuNA7/3/

于 2013-10-07T16:04:04.380 に答える