javascript - 如何在将元素附加到 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();
}