3

Twitter Bootstrap のモーダル ダイアログに問題があります。
HTML コード:

<div class="container">
    <div class="delete_dosar">delete</div>
</div>

<!-- Boostrap modal dialog -->
<div id="delete_confirmation" class="modal hide fade" style="display: none; ">
    <div class="modal-header">
        <a href="#" class="close" data-dismiss="modal">x</a>
        <h3>Are you sure?</h3>
    </div>
    <div class="modal-body">
        <div class="paddingT15 paddingB15" id="modal_text">    
        Are you sure with this?
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn confirm_delete_the_item no_return">yes</a>
        <a href="#" class="btn btn-secondary " data-dismiss="modal">no</a>
    </div>
</div>​

JS コード:

$(function() {
$(".delete_dosar").live('click',function(){

    $('#delete_confirmation').modal("show");
    $('.confirm_delete_the_item').live('click',function(e){
        $('#delete_confirmation').modal("hide");
        //e.preventDefault();
        alert('x');
    });

    return false;
});
});​

コードはここで実行されています: http://jsfiddle.net/darkwish02/u7hEv/

「削除」して「はい」をクリックすると、最初はアラートが 1 つしか表示されませんが、2 回目に (更新せずに) 「削除」をクリックすると、アラートが 2 つ表示されます。

イベント「クリック」は2回連続して実行されるようです。

4

2 に答える 2

7

あなたがやっている方法では、削除ボタンがクリックされるたびに新しいクリックハンドラーを添付しています。

内側のクリック ハンドラの挿入を最初のものから移動する必要があります。次に、「はい」ボタンのハンドラーは常に 1 つだけになります。

このフィドルは、それが機能していることを示しています: http://jsfiddle.net/KSxJs/

$(function() {

    $('.confirm_delete_the_item').live('click', function(e) {
        $('#delete_confirmation').modal("hide");
        //e.preventDefault();
        alert('x');


    });


    /** SETERGERE DE DOSAR DIN PARTEA STANGA **/
    $(".delete_dosar").live('click', function() {

        $('#delete_confirmation').modal("show");

        return false;

    });
});​
于 2012-10-30T18:53:33.920 に答える
2

そのためには、bootbox または bootstrap-dialog を使用することをお勧めします。

見る：

http://bootboxjs.com/

http://github.com/nakupanda/bootstrap3-dialog

于 2013-06-05T09:59:21.637 に答える