国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript – Das von meinem Bootstrap-Code generierte modale Dialogfeld wird mehrmals ausgeführt
曾經(jīng)蠟筆沒有小新
曾經(jīng)蠟筆沒有小新 2017-05-19 10:20:10
0
2
751

    //對話框
    //生成對話框
    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">關(guān)閉</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;
        }
      });
      //關(guān)閉對話框后清除modal中數(shù)據(jù)
      $("#dialog").on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");
      });
    })

HTML-Code


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

Wenn ich auf die Schaltfl?che ?Hinzufügen“ klicke, wird zuerst die Warnung (?1‘) ausgeführt, und dann wird ein Dialogfeld angezeigt. Nachdem ich das Dialogfeld geschlossen und dann auf ?Hinzufügen“ geklickt habe, wird die Warnung (‘1‘) ausgeführt zweimal, das hei?t, es hei?t, dass ich zwei Warnfelder erhalte, aber das modale Dialogfeld wird angezeigt, nachdem die Warnung ('1') abgeschlossen ist. Wenn Sie das Modal-Dialogfeld schlie?en und erneut auf die Schaltfl?che klicken, wird Alert('1') dreimal ausgeführt und so weiter.

Dann kann ich verstehen, dass der folgende Code je nach Anzahl der Klicks auf die Schaltfl?che mehrmals ausgeführt wird.


    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;

Wie soll ich dieses Problem l?sen?

曾經(jīng)蠟筆沒有小新
曾經(jīng)蠟筆沒有小新

Antworte allen(2)
PHPzhong

其實(shí)還可以這么解決,,我不是搞前端的,但是這種問題遇見過

第一種:把事件放到click事件外去定義

$('*[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");
})

第二種: 先移除事件再綁定事件

$('*[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;
        }
    });
    //關(guān)閉對話框后清除modal中數(shù)據(jù)
    $("#dialog").off("hidden.bs.modal").on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");
    });
})
世界只因有你

一直搞不明白這個問題出現(xiàn)的原因,現(xiàn)在我的暴力解決辦法是當(dāng)關(guān)閉了對話框后remove()掉這個對話框,問題解決。

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">關(guān)閉</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();
      });
    })
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage