2

我有 jQuery v1.8.3 和 twitter-bootstrap v2.2.1

我想创建一个函数来动态显示消息。

function showMsg(header, text, closeFunc) {
    var randId = Math.round(Math.random()*1000000);

    var dialog = '<div id="modal_' + randId + '" class="modal hide fade">';
    dialog += '<div class="modal-header">';
    dialog += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
    dialog += '<h3>' + header + '</h3>';
    dialog += '</div>';
    dialog += '<div class="modal-body">';
    dialog += text;
    dialog += '</div>';
    dialog += '<div class="modal-footer">';
    dialog += '<button id="modalBtn_' + randId + '" class="btn btn-primary">Close</button>';
    dialog += '</div>';
    dialog += '</div>'; 

    $('body').append(dialog);

    var modal = $('#modal_' + randId);

    modal.modal({backdrop : false, show : false, keyboard : false});
    modal.modal('show');

    var btn = $('#modalBtn_' + randId);
    btn.click(function(){
       closeFunc();
       modal.modal('hide');     
    });

}

但是在一次显示超过 3 条这些消息后，我在 Jquery 中得到一个错误：too much recursion

我该如何解决它或有其他方法？

4

2 回答 2

10

我无法重新创建您的“递归过多”错误，但我确实想建议一种比您当前拥有的代码更好的处理动态消息的方法。也就是说，您可以只使用一个 Modal 并在显示之前更新其中的内容。这将消除您目前产生的所有开销

  1. 让 jQuery 反复将相同的字符串解析为 html；
  2. 为每条消息实例化一个新的 Modal 对象；和
  3. 生成随机 id，然后在 DOM 中搜索使用它们创建的元素。

作为替代方案，从一开始就在标记中使用以下空白模式。在哪里并不重要，但底部<body>是一个典型的位置。如果您必须动态生成它，请在showMsg函数之外执行并且只执行一次。

<div id="msgModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3></h3>
  </div>
  <div class="modal-body">
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary callback-btn" data-dismiss="modal">Close</button>
  </div>
</div>

请注意，我确实通过将固定添加id="msgModal"到模态并将类callback-btn和属性添加data-dismiss="modal"到button.

那么代码showMsg可能是：

var $msgModal = $('#msgModal').modal({
      backdrop: false,
      show: false,
      keyboard: false
    }),

  showMsg = function (header, body, callback) {
    $msgModal
      .find('.modal-header > h3').text(header).end()
      .find('.modal-body').text(body).end()
      .find('.callback-btn').off('click.callback')
        .on('click.callback', callback).end()
      .modal('show');
  };

这是一个演示，如果单击页脚按钮，它将输出到控制台：

PLNKR

于 2012-11-28T06:24:51.417 回答
0

或者只是触发这个事件：

jQuery('<a href="#my_new_div_with_modal_template" data-toggle="modal">Click me !</a>').trigger('click.modal.data-api');
于 2013-04-04T10:37:16.937 回答