时间戳

首页 > 解决方案 > 单击处理程序奇怪的行为

javascript - 单击处理程序奇怪的行为

问题描述

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

  1. 我已经添加了脚本。
  2. 在脚本的数据模式属性中，我添加了单击，因此它仅在单击时起作用。
  3. 在 data-mode-click-id 中，我添加了按钮的 ID“ happyBtn ”。
  4. 在 script 标签之前，我添加了一个 div 来渲染它。
  5. 我已将相同的 ID“ happyBtn ”添加到不同的 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属性时，它开始工作。请帮我解决这个问题。

标签： javascripthtmljquerycssasp.net

解决方案

在脚本标签之前添加“ 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

推荐阅读