method called multiple times

Question

My purpose is to define ajax method callback with jquery. all DOM of parent div are loaded dynamically i have define delete button foreach comments and i want to get confirmation from twitter bootrap modal befor throw the ajax request : https://jsfiddle.net/r4sLt016/5/

     this.deleteComment = function () {
         self = this;
         $("button[name='deleteComment']").each(function (index, el) {
             $(this).unbind().bind('click', function (event) {
                 event.preventDefault();
                 var ref = $(this).attr('data-ref');
                 var callback = function () {
                     /*$.ajax({
                        url: '/path/to/file',
                        type: 'DELETE',
                        data: {param1: 'value1'},
                      })
                      .done(function() {
                        console.log("success");
                      })
                      .fail(function() {
                        console.log("error");

                      });*/
                     alert("multiple");
                 }
                 self.confirm("Delete Comment ", "Are you sure you want \
                   to delete this Comment ?", callback);
             });
         });
     }

     this.confirm = function(head, question, callback) {
            $(".modal-title").html(head);
            var body = $("<p/>").text(question);
            $(".modal-body").html(body);
            $("#deleteModal").click(function(event) {
                callback();
                $('.customModal').modal('hide');
            });
            $('.customModal').modal('show');
    }

@ArunPJohny you can vote for "duplicate of" instead of "off-topic" — NDM, Sep 10 '15 at 09:13

score 0 · Accepted Answer · answered Sep 10 '15 at 09:10

You are binding the click event deleteModal element everytime you call the confirm() method! So you have to unbind() and bind() again like you did at the deleteComment buttons.

Like this:

this.confirm = function(head, question, callback) {
        $(".modal-title").html(head);
        var body = $("<p/>").text(question);
        $(".modal-body").html(body);
        $("#deleteModal").unbind().bind('click', function(event) {
            callback();
            $('.customModal').modal('hide');
        });
        $('.customModal').modal('show');
}

>> Updated JSfiddle!

method called multiple times

1 Answers1