引导程序弹出窗口(bootbox)中的Javascript事件不起作用

Javascript events inside bootstrap popup (bootbox) dont work

本文关键字:中的 Javascript 事件 不起作用 bootbox 窗口 引导程序      更新时间:2023-09-26

我正在尝试创建一个带有bootbox模式的引导弹出窗口,表单内部有一个带有屏蔽输入的输入文本,但弹出窗口内部的任何事件都不起作用。

请参见此处:http://jsfiddle.net/ens1z/UK6x5/5/

html:

<p>The mask input below WORKS great</p>
<p>
    <input type="text" class="mask" />
</p>
<a href="#" class="btn btn-inverse" id="asssf">OPEN BOOTBOX</a>
<div id="frm" style="visibility: hidden">
    <div class="form-horizontal">
        <p>The mask input below DON´T WORK. :-(</p>
        <input type="text" class="mask"/>
    </div>
</div>

JavaScript:

 $("#asssf").click(function (e) {
            e.preventDefault();
     bootbox.dialog({
                  message: $("#frm").html(),
                  title: "Custom title",         
                  buttons: {
                    success: {
                      label: "Success!",
                      className: "btn-danger",
                      callback: function() {
                            return;
                      }
                    }
                  }
            });
           $(".mask").mask("999-99-9999",{placeholder:"_"});
});
$(".mask").mask("999-99-9999",{placeholder:"_"});

如何在弹出窗口中屏蔽工作?

试试这个小提琴:)这里

问题是,您在没有他的事件的情况下将html加载到bootbox。

我做了一个函数来解决你的问题:

function BootboxContent(){
    var content = $("#frm").clone(true);
    $(content).css('visibility','visible');
     content.find('.mask').mask("999-99-9999",{placeholder:"_"});
 return content ;
}

在你的信息中调用它,就像在小提琴中一样,或者没有这样的功能:

 bootbox.dialog({
              message: $("#frm").clone(true).css('visibility','visible').find('.mask').mask("999-99-9999",{placeholder:"_"}),
              title: "Custom title",         
              buttons: {
                success: {
                  label: "Success!",
                  className: "btn-danger",
                  callback: function() {
                        return;
                  }
                }
              }
        });
});