javascript - Why my plugin fires multipe callback or clicks -

i creating simple jquery plugin can use attach action's confirmation. facing strange issue, work fine single element click, when going click second element bind plugin work fine it's fires previous clicked element well.

(function ($) {  $.fn.bootconfirm = function (options) {     // establish our default settings     var settings = $.extend({         message: 'are sure ?',         complete: null     }, options);      var self = this;     var cointainer = '\                     <div class="modal fade" id="confirmboot" role="dialog" aria-labelledby="confirmdeletelabel" aria-hidden="true">\                       <div class="modal-dialog">\                         <div class="modal-content">\                           <div class="modal-header">\                             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\                             <h4 class="modal-title">confirm action</h4>\                           </div>\                           <div class="modal-body">\                             <p>are sure ?</p>\                           </div>\                           <div class="modal-footer">\                             <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>\                             <button type="button" class="btn btn-success btn-ok" id="confirm">ok</button>\                           </div>\                         </div>\                       </div>\                     </div>';      return this.each(function () {         var self = this;         $(this).click(function () {             if (!$('#confirmboot').length) {                 $('body').append(cointainer);             }             if (settings.message) {                 $('#confirmboot').find('.modal-body').text($(this).attr('data-confirm'));             }             $('#confirmboot').modal({ show: true });              if ($.isfunction(settings.complete)) {                 $('#confirmboot').find('.btn-ok').click(function () {                                             $.when(settings.complete.call(this, self)).done(function () {                         $('#confirmboot').modal("hide"); // alerts "123"                     });                 });             }         });     }); } }(jquery)); 

this callback function :

function kaushik(myobject) { manageacriveproducts(myobject); }; 

and calling following way

$('a[data-confirm]').bootconfirm({         complete: kaushik     }); 

for more detail check js fidder jsfiddle. can 1 share possible solution or better way this. or there better way achieve ?

the problem you're assigning click on btn-ok on every click event on bootconfirmed object. , each click linked object has been clicked, ends in callback every time click btn-ok.

one simple fix, though i'm not sure it's best, remove click on btn-ok after action complete. this:

      $.when(settings.complete.call(this, self)).done(function () {                $('#confirmboot').modal("hide");                $('#confirmboot').find('.btn-ok').off('click');        }); 

working fiddle: http://jsfiddle.net/ywunutyw/

edit:

a little improvement on previous solution, might need adjustments, since didn't details, should give ideas. prevent adding click events , removing them every time user clicks on button, can define click on modal window outside click behavior of each active/inactive button. , on click of active/inactive define target used in modal confirmation. this:

just before calling behaviors this.each:

$(document).on('click', '#confirmboot .btn-ok',         function (e) {             if ($.isfunction(settings.complete)) {                 console.log(self)                 $.when(settings.complete.call(this, click_origin)).done(function () {                     $('#confirmboot').modal("hide");                  });             }             }); 

then on click event of active/inactive:

click_origin = e.target; 

see fiddle: http://jsfiddle.net/ywunutyw/1/