javascript - Bootstrap 表单助手电话不会在 ajax 数据中工作

Question

我的 Bootstrap 电话表单助手工作正常，但当我尝试使用 jQuery/javascript 添加更多文本框时，它不起作用。

使用正常形式:

<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>

点击添加更多按钮(Bootstrap 电话表格不工作)

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

谢谢

Answer 1

将 bfh 控件添加到 DOM 后，您需要手动对其进行初始化。这有点乱，他们真的可以给我们一个 init() 函数或其他东西。无论如何，这应该有效:

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