CODEWITHSUNDEEP
jquerytwitter-bootstrapmodal-dialog
Mihai Totoianu
Mihai Totoianu

Reputation: 41

twitter bootstrap modal dialog

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.

Upvotes: 3

Views: 10740

Answers (2)

nakupanda
nakupanda

Reputation: 111

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

See:

http://bootboxjs.com/

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

Upvotes: 2

fegemo
fegemo

Reputation: 2594

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;

    });
});​

Upvotes: 7

Related Questions