Javascript 模态窗口例程每次点击都会执行更多时间

Question

所以我有一个模式对话框窗口，您可以将函数传递到其中。

function dialog(message, yesCallback, noCallback) {

    $('#modal_dialog div.title').html(message);
    var dialog = $('#modal_dialog');
    dialog.show();

    $('#btnYes').click(function() {
        yesCallback();
        setTimeout(function(){dialog.hide();},3000);
    });
    $('#btnNo').click(function() {
        noCallback();
        setTimeout(function(){dialog.hide();},3000);
    });
}

当我使用以下方法将函数传递给它时:

$(document).on('tap','.rsvp',function(event){
  console.log('rsvp');
  value = $(this).parent().find('.storyid').text();
  dialog($(this).parent().find('H4').text(),function(){doingComing(value,'yes');},function(){doingComing(value,'no');});
});

它第一次工作 find.... 触发一次...当我再次单击 .rsvp 类，然后单击是或否按钮时，它会触发两次。

然后三次

然后四次。

我不确定为什么会发生这种情况。

感谢任何帮助。

Answer 1

每次调用 dialog 方法时都会绑定(bind)单击事件。由于 jQuery 允许将多个相同类型的事件附加到一个元素。

解决此问题的一种方法是在调用 dialog 方法时绑定(bind)和取消绑定(bind)事件。这更像是一种 hacky 方法，因为不断的绑定(bind)和解除绑定(bind)被认为是一种反模式。

第二种方法是将点击事件移至 dialog 方法之外，并找到一种区分回调的方法。