php - 无法在 jquery 中 append HTML 代码

Question

我无法使用 jQuery append HTML 代码。这是我的 HTML 代码:

<div class="am-right-section">
    <div class="right-quote-section">
    <img class="customer-profile-img" src="http://45.56.70.30/mijpaal_am/pub/media/images/avtaaar.png" width="100px" height="100px"><div class="centered">
    <div id="loading" style="display:none">
    <img src="http://45.56.70.30/mijpaal_am/pub/media/am-loader/loader.gif">
    </div>
    </div>
<form class="form customerdetail" action="http://45.56.70.30/mijpaal_am/accountmanager/accountmanager/amsave" id="customerdetail" method="post" data-hasrequired="* Required Fields" novalidate="novalidate">
    <fieldset class="fieldset">

                <div class="control">
                    <input name="customer_land" id="customer_land" class="customer_land required-entry1" aria-required="true" type="text">
                </div>

                <button type="submit" title="Submit" class="action submit primary">
                    <span>Generate Request</span>
                </button>

    </form>
    </div>
    </div>
        <div class="tab-content">
            <div class="tab-pane active" id="contact_01">kndsa jkasf kajf kndsa jkasf kajf  kndsa jkasf kajf  kndsa jkasf kajf  kndsa jkasf kajf  kndsa jkasf kajf  </div>

        </div>

这是我的 jQuery:

<script>
 jQuery('.add-contact').click(function(e) {
        e.preventDefault();
        var id = jQuery(".nav-tabs").children().length; //think about it ;)
        jQuery(this).closest('li').before('<li><a href="#contact_'+id+'">New Tab</a><span>x</span></li>');         
        jQuery('.tab-content').append('<div class="tab-pane" id="contact_'+id+'"><?php echo $template;?></div>');
});
</script>

我已成功在 $template 变量中设置 HTML。但是 append 不起作用。我的 html 未 append 到选项卡内容类中。

请解决我的疑问。提前致谢!!!!

Answer 1

我认为，您的 jQuery 代码在页面加载之前运行。试试这个:

jQuery(document).ready(function(){
    jQuery('.add-contact').click(function(e) {
        e.preventDefault();
        var id = jQuery(".nav-tabs").children().length;
        jQuery(this).closest('li').before('<li><a href="#contact_'+id+'">New Tab</a><span>x</span></li>');         
        jQuery('.tab-content').append('<div class="tab-pane" id="contact_'+id+'"><?php echo $template;?></div>');
    });
});