将元素附加到 DOM 后如何重新加载脚本

Question

Hello I am working with LIKEBTN I have some designs on which I need likes and I have added the likebtn library on the designs but there is a load more which get the old designs as well and after ajax the html appends on the page and there I am not able to load like button library. As script has loaded before on page load so it's not appending on the new DOM elements. I have tried . live and .delegate as well but couldn't find the solution.

You can see there is a heart icon which has the like functionality and in console you will find child elements inside <span> as well which loaded by likebtn library but after I load more designs by ajax I couldn't load likebtn library scripts on that elements you can see the image there is no like icon and in console there is no child elements inside <span> .

This is my html which appends on ajax load more. it has dynamic variable coming from database.

                <a data-index="{{ loop.index0 }}" class="galimg animate" data-animation="fadeInUp" data-duration="010">
                 <div class="gimg">
                    <img class="img-fluid" src="{% path (design.designThumbnail), 'thumbnail' %}" alt="" />
                    <div class="gimg-caption">
                        <div class="title">
                            <h6>{{ design.title }}</h6>
                            <p>By: {{ (design.userId.userFullname!= ' ')? design.userId.userFullname|uppercase_first_letter : design.userId.contactName|uppercase_first_letter }}</p>
                            <p>From: United Kingdom</p>
                        </div>
                        <div class="likes">=
                            <!-- LikeBtn.com BEGIN -->
                            <span class="likebtn-wrapper" data-theme="custom" data-icon_size="24" data-icon_l="hrt6" data-icon_d="sml3-u" data-icon_l_c="#ffffff" data-icon_l_c_v="#fb0505" data-label_c="#ffffff" data-label_c_v="#ffffff" data-counter_l_c="#ffffff" data-bg_c="rgba(250,250,250,0)" data-bg_c_v="rgba(250,250,250,0)" data-brdr_c="rgba(198,198,198,0)" data-i18n_like="Love this" data-white_label="true" data-identifier="btn_design_{{ loop.index }}" data-dislike_enabled="false" data-icon_dislike_show="false" data-counter_zero_show="true" data-popup_disabled="true" data-share_enabled="false" data-tooltip_enabled="false" data-site_id="5b7ac72c6fd08b366d431a36"></span>
                            <!-- LikeBtn.com END -->
                        </div>
                    </div>
                 </div>
            </a>

This is the library I need to load after ajax succes

<script>(function(d,e,s) {if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>

Answer 1

You can use init() method after ajax success. It will render your new elements.

if (typeof(LikeBtn) != "undefined") {
    LikeBtn.init();
}