bootstrap form helper phone wont work in ajax data

Question

My Bootstrap phone form helper is working fine but when I try to add more textboxes using jQuery/javascript it does not work.

Working with normal form:

<div class="n_g_p_pop" id="mainprice">
    <label> 
        <span id="base_rental">Base rental rate</span> 
        <i class="gn_icon8" title="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."></i>
    </label>
    <input type="text" value="" placeholder="$" id="base_rental_rate" class="bfh-phone" data-format="$dddd"/>
    <div class="clear"></div>
</div>

on add more button click (Bootstrap phone form not working)

var id = 101;
function add_extra()  {
    var data = '<div id="new_element_' + id + '" class="month_int_b"><div class="gn_b_1"> <i class="gn_icon12"></i><div class="gn_b_1_i"><input type="text" value="" placeholder="$" class="bfh-phone" data-format="$dddd" /></div></div><div class="gn_b_1"> <i class="gn_icon12"></i><div class="gn_b_1_i"><input type="text" value="" placeholder="$" class="bfh-phone" data-format="$dddd"/></div></div><div class="gn_ad_m1"><a href="javascript:void(0);" onclick="remove_extra(' + id + ')"></a></div><div class="clear"></div></div>';
    id++;
    $('#add_new_element').append(data);
}

Thanks

Answer 1

You need to initialize the bfh control manually after you've added it to the DOM. It's a bit messy and they could really have given us an init() function or something. Anyway, this should work:

$('form input[type="text"].bfh-phone, form input[type="tel"].bfh-phone, span.bfh-phone').each(function() {
   var $phone = $(this);
   $phone.bfhphone($phone.data());
});