更改网址后jQuery触发点击答案

【问题标题】：jQuery trigger click after changing url更改网址后jQuery触发点击
【发布时间】：2021-01-06 10:17:33
【问题描述】：

我有一个记录点击带有数据标签的链接的功能。该代码隐藏电话号码，直到单击链接，然后显示该号码。我遇到的问题是，一旦加载后，我无法在没有用户交互的情况下触发该显示的数字。

我必须阻止第一次单击按钮时的默认事件，因为网址尚未包含真实数据，而且我不希望页面跳转。

单击后，新链接的 html 将更改为，例如：“☎ 0123456789”
并且 href 将更改为，例如：“tel:0123456789”
此数据来自 AJAX PHP 文件发送的 JSON。

在此之后，我想以编程方式单击 URL，但我似乎无法启动它并不断收到控制台错误消息，上面写着“未捕获的 TypeError：事件未定义”
~ 大概与事件阻止默认？

信息：将通过 PHP 加载多个电话号码，因此我需要单独访问每个号码。

链接的 HTML；

 <a data-num='$number' class='telephone' href='#'>&#9742; Click to call</a>

JS 代码（jQuery 3.4.1）；

 $(document).on('click','.telephone',function(event) {
     event.preventDefault(); // Prevent page jump
     var num = $(this).data("num");
     $.ajax({
         url: "myserverfile.php",
         method: "POST",
         data: {num: num},
         dataType: "json",
         success: function(a) {
             var b = (a[0]['status']); // True or false
             var c = (a[0]['tel']); // Number or error
             // If result found change URL and click it to call number
             if (b == true) {
                 $('.telephone[data-num="' + num + '"]').html("&#9742;&nbsp;" + c); // Change link text
                 $('.telephone[data-num="' + num + '"]').attr("href", "tel:" + c); // Change link href
                 $('.telephone[data-num="' + num +'"]').click(); // Update: This causes a loop because it runs the code again. I need to hide the original a tag and create a new one then trigger it.
             }
         }
     });
 });

有什么建议吗？

【问题讨论】：

错误信息是什么？ num 的值是多少？
num 是表中一行中的一列，其中还包含另一列带有电话号码的列。错误引用了 4 部分代码，第一个是 event.preventDefault();所以我认为这就是问题所在，因为其他参考资料都还可以。
`事件未定义来自未显示的内容...可能是单击事件侦听器代码
num 在这种情况下是“5f4284e4ce801”，它标识特定的行。除了通过 jQuery 更改 URL 后的自动单击之外，所有这些都正常工作。
您只是忘记包含事件参数...98% 确定没有看到代码

标签： html jquery

【解决方案1】：

调用.click() 方法不会创建event。 event 是在用户实际点击某物时创建的。如果你console.log(event) 被.click() 调用，它将是undefined，这是你得到错误的地方。为了解决这个问题，你可以

if (event) { event.preventDefault(); }

但是你会遇到递归，因为你基本上是

$(document).on('click', '.telephone', function() { $('.telephone').click(); });

要解决这个问题，您可以添加类似 loaded 类的内容

$(document).on('click', '.telephone:not(.loaded)', function() {
  $('.telephone[data-num="' + num +'"]')
    .addClass('loaded')
    .attr(...)
    .html(...)
    .click();
});

此外，您稍后会感谢自己使用更具描述性的变量名称。对于那些不知道的人，jquery is chainable。

【讨论】：

【解决方案2】：

想通了。我正在创建一个循环，所以点击不起作用，所以我在点击后隐藏了第一个链接并加载了一个新的隐藏链接。我为这个新链接上的数据标签使用了表中不同的列值，以避免任何可能的冲突。

除了循环问题之外，我在分配 .click 之前缺少的主要部分是 [0]。

感谢一路上的建议。

下面的工作代码；

 $(document).on('click', '.telephone', function(event) {
     event.preventDefault();
     var num = $(this).data("num");

     $.ajax({
         url: "myserverfile.php",
         method: "POST",
         data: {num: num},
         dataType: "json",

         success: function(a) {
             var b = (a[0]['status']);
             var c = (a[0]['id']);
             var d = (a[0]['tel']);

             if (b == true) {
                 $('.telephone[data-num="' + num + '"]').hide(200);
                 $(document).ready(function() {
                     $(".telephone-reveal");
                     $('.telephone-reveal[data-id="' + c + '"]').show(200);
                     $('.telephone-reveal[data-id="' + c + '"]').html("&#9742;&nbsp;" + d);
                     $('.telephone-reveal[data-id="' + c + '"]').attr("href", "tel:" + d);
                     $('.telephone-reveal[data-id="' + c + '"]')[0].click();
                 });
             }
         }
     });
 });

【讨论】：