javascript - Kotak dialog Modal yang dijana oleh kod bootstrap saya akan dilaksanakan beberapa kali
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-19 10:20:10
0
2
590

    //对话框
    //生成对话框
    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");
      });
    })

kod html


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

Apabila butang tambah diklik, amaran('1') akan dilaksanakan dahulu, dan kemudian kotak dialog akan muncul Selepas saya menutup kotak dialog, dan kemudian klik tambah, amaran('1') akan dilaksanakan dua kali, iaitu Ia mengatakan bahawa saya akan menerima dua kotak amaran, tetapi kotak dialog modal akan muncul selepas amaran('1') selesai. Jika anda menutup kotak dialog Modal dan klik butang sekali lagi, amaran('1') akan dilaksanakan tiga kali, dan seterusnya.

Maka bolehkah saya memahami bahawa kod berikut akan dilaksanakan beberapa kali bergantung pada bilangan kali butang itu diklik.


    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;

Jadi, bagaimana saya harus menyelesaikan masalah ini?

曾经蜡笔没有小新
曾经蜡笔没有小新

membalas semua(2)
PHPzhong

Sebenarnya boleh selesai begini, saya bukan orang yang front-end, tapi pernah hadapi masalah macam ni

Kaedah pertama: letakkan acara di luar acara klik untuk menentukan

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

Jenis kedua: alih keluar acara dahulu dan kemudian ikat acara

$('*[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");
    });
})
世界只因有你

Saya tidak pernah dapat mengetahui sebab masalah ini Sekarang penyelesaian brute force saya adalah untuk mengalih keluar() kotak dialog selepas menutup kotak dialog, dan masalah itu diselesaikan.

Kod 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();
      });
    })
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!