无法在 jquery 中附加 HTML 代码答案

【问题标题】：Not able to append HTML code in jquery无法在 jquery 中附加 HTML 代码
【发布时间】：2018-09-02 23:00:22
【问题描述】：

我无法使用 jQuery 附加我的 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。但是追加不起作用。我的 html 没有追加到选项卡内容类中。

请解决我的问题。提前谢谢！！！！

【问题讨论】：

标签： php jquery html append

【解决方案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>');
    });
});

【讨论】：

【解决方案2】：

经过以下测试。有用。一定是$template的内容有问题。

<?php
        $template =<<<JS
        <div class="quote-status"> <input name="quote-status-value" value="0" checked="" type="radio"> Get Email and set value<br> <input name="quote-status-value" value="1" type="radio"> Set value<br> </div>
JS;
        ?>      
        <script>
 jQuery(document).ready(function(){
    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>

【讨论】：