使用JavaScript将EventListner动态附加到链接

mspsb9vt 于 2023-02-15 发布在 Java

关注(0)|答案(1)|浏览(165)

以下代码通过functions.php注入到wordpress页面。
我正在使用SweetAlert2启动一个显示TOS同意的弹出窗口。
我正在尝试将eventListner动态附加到启动该弹出窗口的链接。
当页面首次加载时，monthly处于初始化状态（按钮为active），但一旦单击oneTime按钮，我希望将eventListener重新附加到该表单（show_iframe_2）上的链接。
不知何故，代码表现奇怪，在第一轮它不启动弹出窗口上的oneTime按钮，但点击链接后，来回2个形式，它会...任何想法如何实现这项任务？

window.onload = function () {
  const oneTime = document.getElementById("show_iframe_2");
  const monthly = document.getElementById("show_iframe_1");
  // these are on monthly form elements
  let popLink = document.getElementById("privacyLink");
  let consentCheckBox = document.getElementById("field_68823bb");
  updatePopLink(popLink, consentCheckBox);

  async function updatePopLink(link, checkBox) {
    if (popLink) {
      popLink.removeEventListener("click", launchPopUp);
    }
    popLink = link;
    consentCheckBox = checkBox;
    await popLink.addEventListener("click", launchPopUp);
  }
  function launchPopUp() {
    fetch("https://privacy-and-tos-page/")
      .then((response) => response.text())
      .then((text) => {
        // Parse the response text as an HTML document
        let parser = new DOMParser();
        let doc = parser.parseFromString(text, "text/html");

        // Select the element by its id
        let element = doc.getElementById("main");

        // Get the innerHTML of the selected element
        let html = element.innerHTML;

        Swal.fire({
          title: "",
          html: html,
          showCancelButton: true,
          confirmButtonText: "Confirm",
          cancelButtonText: "Cancel",
          confirmButtonColor: "#3085d6",
          width: 1200,
        }).then((result) => {
          if (result.value) {
            consentCheckBox.checked = true;
          } else if (result.dismiss === Swal.DismissReason.cancel) {
            consentCheckBox.checked = false;
          }
        });
      });
  }

  oneTime.addEventListener("click", function (event) {
    popLink = document.getElementById("privacyLink");
    consentCheckBox = document.getElementById("field_6a9f758");
    updatePopLink(popLink, consentCheckBox);
  });
  monthly.addEventListener("click", function (event) {
    popLink = document.getElementById("linkId");
    consentCheckBox = document.getElementById("field_68823bb");
    updatePopLink(popLink, consentCheckBox);
  });
};

JavaScript

来源：https://stackoverflow.com/questions/75365799/dynamically-attach-eventlistner-to-link-using-javascript

1条答案

按热度按时间

eh57zj3b1#

由于我找不到解决办法，我只是简单地做了以下事情：

window.onload = (event) => {
    let popLinkMonthly = document.getElementById("privacyLink");
    let consetCkBoxMonthly = document.getElementById("field_68823bb");
    let popLinkOneTime = document.getElementById("linkId");
    let consetCkBoxOneTime = document.getElementById("field_68823bb");
        popLinkMonthly.addEventListener('click', function(){

          fetch("https://some-url/")
          .then(response => response.text())
          .then(text => {
            let parser = new DOMParser();
            let doc = parser.parseFromString(text, "text/html");

            let element = doc.getElementById("main");
            let html = element.innerHTML;

            Swal.fire({
                title: '',
                html: html,
                showCancelButton: true,
                confirmButtonText: 'Confirm',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#3085d6',
                width: 1200,
            }).then((result) => {
                if (result.value) {
                    consetCkBoxMonthly.checked = true;
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    consetCkBoxMonthly.checked = false;
                }
            });
        })                  
    });

        popLinkOneTime.addEventListener('click', function(){

            fetch("https://some-url/")
            .then(response => response.text())
            .then(text => {
                let parser = new DOMParser();
                let doc = parser.parseFromString(text, "text/html");

                let element = doc.getElementById("main");

                let html = element.innerHTML;

                    Swal.fire({
                        title: '',
                        html: html,
                        showCancelButton: true,
                        confirmButtonText: 'Confirm',
                        cancelButtonText: 'Cancel',
                        confirmButtonColor: '#3085d6',
                        width: 1200,
                    }).then((result) => {
                        if (result.value) {
                            consetCkBoxOneTime.checked = true;
                        } else if (result.dismiss === Swal.DismissReason.cancel) {
                            consetCkBoxOneTime.checked = false;
                        }
                    });
                })                  
            });
        }

赞(0）回复(0）举报 2023-02-15

我来回答

使用JavaScript将EventListner动态附加到链接

1条答案

相关问题

热门标签

最新问答