单击处理程序奇怪的行为答案

【问题标题】：Click handler strange behaviour单击处理程序奇怪的行为
【发布时间】：2021-09-03 20:17:12
【问题描述】：

我正在集成第三方库“幸福度计”。我已经实现了他们提到的所有步骤，但面临初始化问题。点击处理程序有时有效，有时无效。步骤如下：

我已添加脚本。
在脚本的 data-mode 属性中，我添加了 click，因此它仅在点击时起作用。
在 data-mode-click-id 中，我添加了按钮的 ID“happinessBtn”。
在脚本标记之前，我添加了一个 div，它将在其中呈现。
我已将相同的 ID“happinessBtn”添加到不同的 div，因为我想在点击事件时打开该仪表。

下面是我的代码：

<div id="happiness-meter-widget-container"></div>
<script id="happiness-meter-widget-script" src="https://happinessmeter.gov.ae/webwidget/services.js"
    data-container-id="happiness-meter-widget-container"
    data-language="@culture"
    data-key="development"
    data-on-finish="console.log(textStatus)"
    data-entity-sequence-id="112"
    data-main-service-sequence-id=""
    data-subservice-sequence-id=""
    data-subservice-complementary-id=""
    data-service-name-en=""
    data-service-name-ar=""
    data-customer-id=""
    data-email=""
    data-phone=""
    data-transaction-id=""
    data-emirates-id=""
    data-version="latest"
    data-delay="0"
    data-mode="click"
    data-mode-click-id="happinessBtn"
    data-css-url="CSS-URL">
</script>
<div class="icon" id="happinessBtn" data-placement="left">
    <i class="icon-happiness"></i>
</div>
$(document).on('click', '#happinessBtn', function () {

});

注意：当我使用 auto 而不是点击 data-mode 属性时，它开始工作。请帮我解决这个问题。

【问题讨论】：

为什么是css、asp.net（javascript、html）？
@Andreas 我在这个功能中使用了所有这些技术

标签： javascript html jquery css asp.net

【解决方案1】：

在脚本标签前添加“async”关键字。例如

<script id="happiness-meter-widget-script" async src="https://happinessmeter.gov.ae/webwidget/services.js"

添加这将确保外部脚本与 HTML 解析并行获取，并在它可用时立即进行评估。更多详情请访问以下链接：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async

【讨论】：

【解决方案2】：

您不能使用具有相同 id 的两个元素，因为每个页面的 id 都是唯一的。

尝试将 id 更改为 class 并重试

【讨论】：