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

Question

您好，我正在与LIKEBTN 合作，我有一些我需要喜欢的设计，我已经在设计中添加了 likebtn 库，但是还有更多的负载可以获取旧设计，并且在 ajax 之后附加了 html该页面，我无法像按钮库那样加载。由于脚本在页面加载之前已加载，因此它不会附加到新的 DOM 元素上。我也试过 .live 和 .delegate 但找不到解决方案。

您可以看到有一个具有类似功能的心形图标，在控制台中您会在<span> 中找到子元素，这些子元素也由likebtn 库加载，但在我通过ajax 加载更多设计后，我无法加载likebtn该元素上的库脚本您可以看到图像没有类似图标，并且在控制台中<span> 内没有子元素。

这是我的html，它附加在 ajax 加载更多。它有来自数据库的动态变量。

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

这是我在ajax成功后需要加载的库

<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

你可以在 ajax 成功后使用 init() 方法。它会渲染你的新元素。

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