javascript - La boîte de dialogue modale générée par mon code d'amorçage sera exécutée plusieurs fois

Question

    //对话框
    //生成对话框
    function createDialog(){
      if ($("#dialog").length == 0){ 
        var str = '<p class="modal fade" id="dialog" tabindex="-1" role="dialog">';
        str += '<p class="modal-dialog">';
        str += '<p class="modal-content">';
        str += '<p class="modal-header">';
        str += '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
        str += '<h4 class="modal-title">对话框</h4>';
        str += '</p>';
        str += '<p class="modal-body"><p class="text-center"><i class="icon-spinner icon-spin"></i></p></p>';
        str += '<p class="modal-footer">'
        str += '<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>';
        str += '<button type="submit" class="btn btn-primary">确定</button>';
        str += '</p>'
        str += '</p>'
        str += '</p>'
        str += '</p>'
        $(str).appendTo('body');
      }
    }
    
    $('*[data-target="#dialog"]').click(function(){
      createDialog();
      $('#dialog').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var action = button.data('action');
        var modal = $(this);
        switch(action)
        {
          case 'add':
            modal.find('.modal-dialog').addClass('modal-lg');
            modal.find('.modal-title').text('添加用户');
            modal.find('.modal-body').html('这里是表单');
            modal.find('.modal-footer button[type="submit"]').removeClass('btn-danger').addClass('btn-primary').text ('添加');
            alert('1'); //测试
          break;
        }
      });
      //关闭对话框后清除modal中数据
      $("#dialog").on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");
      });
    })

code html

    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#dialog" data-action="add">添加</button>

Lorsque vous cliquez sur le bouton Ajouter, alert('1') sera exécuté en premier, puis une boîte de dialogue apparaîtra. Après avoir fermé la boîte de dialogue, puis cliqué sur Ajouter, l'alerte('1') sera exécutée. deux fois, c'est-à-dire qu'il indique que je recevrai deux boîtes d'avertissement, mais la boîte de dialogue modale apparaîtra une fois l'alerte ('1') terminée. Si vous fermez la boîte de dialogue modale et cliquez à nouveau sur le bouton, alert('1') sera exécuté trois fois, et ainsi de suite.

Puis-je alors comprendre que le code suivant sera exécuté plusieurs fois en fonction du nombre de fois où le bouton est cliqué.

    case 'add':
        modal.find('.modal-dialog').addClass('modal-lg');
        modal.find('.modal-title').text('添加用户');
        modal.find('.modal-body').html('这里是表单');
        modal.find('.modal-footer button[type="submit"]').removeClass('btn-danger').addClass('btn-primary').text ('添加');
        alert('1'); //测试
      break;

Alors, comment dois-je résoudre ce problème ?

Answer 1

En fait, cela peut être résolu comme ça, je ne suis pas une personne front-end, mais j'ai rencontré ce genre de problème

La première méthode : mettre l'événement en dehors de l'événement clic pour définir

$('*[data-target="#dialog"]').click(function(){
    createDialog();
})
$(document).on('show.bs.modal','#dialog', function (event) {
    var button = $(event.relatedTarget);
    var action = button.data('action');
    var modal = $(this);
    console.log(action);
    switch(action)
    {
        case 'add':
            modal.find('.modal-dialog').addClass('modal-lg');
            modal.find('.modal-title').text('添加用户');
            modal.find('.modal-body').html('这里是表单');
            modal.find('.modal-footer button[type="submit"]').removeClass('btn-danger').addClass('btn-primary').text ('添加');
            alert('1'); //测试
            break;
    }
})
$(document).on("hidden.bs.modal","#dialog", function() {
    $(this).removeData("bs.modal");
})

Deuxième type : supprimez d'abord l'événement, puis liez l'événement

$('*[data-target="#dialog"]').click(function(){
    createDialog();
    $('#dialog').off('show.bs.modal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var action = button.data('action');
        var modal = $(this);
        switch(action)
        {
            case 'add':
                modal.find('.modal-dialog').addClass('modal-lg');
                modal.find('.modal-title').text('添加用户');
                modal.find('.modal-body').html('这里是表单');
                modal.find('.modal-footer button[type="submit"]').removeClass('btn-danger').addClass('btn-primary').text ('添加');
                alert('1'); //测试
                break;
        }
    });
    //关闭对话框后清除modal中数据
    $("#dialog").off("hidden.bs.modal").on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");
    });
})

Answer 2

Je n'ai jamais réussi à comprendre la raison de ce problème. Maintenant, ma solution par force brute consiste à supprimer() la boîte de dialogue après avoir fermé la boîte de dialogue, et le problème est résolu.

Code JS

  //对话框
    //生成对话框
    function createDialog(){
      if ($("#dialog").length == 0){ 
        var str = '<p class="modal fade" id="dialog" tabindex="-1" role="dialog">';
        str += '<p class="modal-dialog">';
        str += '<p class="modal-content">';
        str += '<p class="modal-header">';
        str += '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
        str += '<h4 class="modal-title">对话框</h4>';
        str += '</p>';
        str += '<p class="modal-body"><p class="text-center"><i class="icon-spinner icon-spin"></i></p></p>';
        str += '<p class="modal-footer">'
        str += '<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>';
        str += '<button type="submit" class="btn btn-primary">确定</button>';
        str += '</p>'
        str += '</p>'
        str += '</p>'
        str += '</p>'
        $(str).appendTo('body');
      }
    }
    
    $('*[data-target="#dialog"]').click(function(){
      createDialog();
      $('#dialog').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var action = button.data('action');
        var modal = $(this);
        switch(action)
        {
          case 'add':
            modal.find('.modal-dialog').addClass('modal-lg');
            modal.find('.modal-title').text('添加用户');
            modal.find('.modal-body').html('这里是表单');
            modal.find('.modal-footer button[type="submit"]').removeClass('btn-danger').addClass('btn-primary').text ('添加');
            alert('1'); //测试
          break;
        }
      });
      //删除对话框
      $("#dialog").on("hidden.bs.modal", function() {
        $(this).remove();
      });
    })