I´m trying create a bootstrap popup with bootbox modal, inside of form has a input text with masked input, but any events inside of popup don´t work.

See here: /

The 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:"_"});

How to mask works inside of popup?

I´m trying create a bootstrap popup with bootbox modal, inside of form has a input text with masked input, but any events inside of popup don´t work.

See here: http://jsfiddle/ens1z/UK6x5/5/

The 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:"_"});

How to mask works inside of popup?

• javascript
• jquery
• twitter-bootstrap
• jquery-events
• bootbox

Share Improve this question Follow edited Aug 9, 2019 at 16:26 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 11, 2013 at 15:02 Jeferson TenorioJeferson Tenorio 2,19011 gold badge2525 silver badges3232 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Try this fiddle :) HERE

The problem is that you loaded the html to bootbox without his events.

i made a function to solve your problem:

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

call it on your message as in the fiddle, or without function like this :

 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;
                  }
                }
              }
        });
});