twitter bootstrap modal dialog

Question

I have a problem with a Twitter Bootstrap modal dialog.
HTML code:

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

The JS code:

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

the code is running here: http://jsfiddle.net/darkwish02/u7hEv/

If i click "delete" and "yes", the first time I have only one alert, but if I click "delete" for a second time (without refreshing) I will have 2 alerts.

The event "click" seems to run 2 consecutive times.

Answer 1

The way you're doing, it's attaching a new click handler each time the delete button is clicked.

You should move the inner click handler insertion out of the first one. Then, there will always be just one handler for the "yes" button.

This fiddle shows it working: 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;

    });
});​

Answer 2

I would suggest you to use bootbox or bootstrap-dialog to do so.

See:

http://bootboxjs.com/

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