代码之家 › 专栏 › 技术社区 › Sunny Rahevar

无法在jquery中附加HTML代码

append html jquery php

Sunny Rahevar · 技术社区 · 6 年前

我无法使用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>

我已成功在$模板变量中设置HTML。但append不起作用。我的html不会附加到选项卡内容类中。

请解决我的问题。提前感谢!!!!

2 回复 | 直到 6 年前

Andrik007 6 年前

我认为,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>');
    });
});

Karlo Kokkak 6 年前

测试如下。它起作用了。$模板的内容一定有问题。

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