Ajax onClick Safari iOS

Question

我有一个自定义WordPress插件，该插件使用Javascript ajax onClick函数制作可点击元素，该元素可从下拉列表中选择一个项目，然后在新选项卡中打开该选择。

除了iOS上的Safari，该代码在所有台式机和移动浏览器上的工作都像梦想一样。

在iOS的Safari中，如果您单击随机按钮，它将成功从选择列表中随机选择一个选项并显示加载动画，但无法从选择中加载新页面。

似乎此错误与其他自Safari以来就进行了详细讨论的野生动物园仅ajax onClick错误类似。除了我还没有找到解决此特定实现的方法。

[根据我迄今为止的研究，我同时包括发现错误的随机按钮和选择列表的代码，可能是这两个元素的相互作用导致了Safari上的错误。

有什么想法吗？

（以下代码已经过清理，以保护我的客户）

WordPress插件中的PHP

            <div ><a  href="javascript:;" id="randoms" class="tooltip">
                <span class="tooltiptext" style="background : grey; opacity : 0.5;">Random</span>
            </a></div>
            <div class="select_able">
            <div class="ruler"></div>
            <img src="<?php echo CLIENT_WEBSITE_URL; ?>public/image/widget-background.jpg" alt="Widget">
                <select name="person_profile" id="person_id">
                    <option value="0" >Search</option>
                    <?php if(!empty($search_person)): ?>
                    <?php foreach($search_person as $search_person): ?>
                        <option value="<?php echo $search_person->entity_id; ?>"> <?php echo $search_person->person_name ?>  </option>
                    <?php endforeach; ?>
                    <?php endif; ?>
                </select>
            </div>

HTML输出

            <div><a href="javascript:;" id="randoms" class="tooltip">
                <span class="tooltiptext" style="background : grey; opacity : 0.5;">Random</span>
            </a></div>
            <div class="select_able">
            <div class="ruler"></div>
            <img src="https://image.url" alt="Widget" data-pagespeed-url-hash="123456" onload="pagespeed.CriticalImages.checkImageForCriticality(this);">
                <select name="person_profile" id="person_id">
                    <option value="0">Search</option>
                    <!-- List with hundreds of options -->
                </select>
            </div>

WordPress插件中的Javascript

    $("#randoms").on("click", function() {
      $.ajax({
        type: "post",
        dataType: "json",
        url: ajaxUrl, 
        data: {
          action: "random_client"
        },
        beforeSend: function() {
          $(".loader").removeClass("hide");
        },
        async: true,
        cache: false,
        headers: { "cache-control": "no-cache" },
        success: function(resp) {
          $(".loader").addClass("hide");
          if (resp.code == 200) {
            var data = {
              id: resp.entity_id,
              text: resp.person_name
            };
            var newOption = new Option(data.text, data.id, true, true);
            $("#person_id")
              .append(newOption)
              .trigger("change");
            var pers_rating = $.trim($(".person_rating").val());
            if (pers_rating < 0) {
              $(".ruler").addClass("hide");
            }
          }
        }
      });
    });

    $(".new-tab-random").on("click", function() {
      $.ajax({
        type: "post",
        dataType: "json",
        url: ajaxUrl,
        data: {
          action: "random_client"
        },
        beforeSend: function() {
          $(".loader").removeClass("hide");
        },
        async: true,
        cache: false,
        headers: { "cache-control": "no-cache" },
        success: function(resp) {
          $(".loader").addClass("hide");
          if (resp.code == 200) {
            fetch_profile_tab(resp.entity_id, resp.person_name);
          }
        }
      });
    });
    $(".loader").removeClass("hide");
    $(document).on("click", ".lower", function() {
      $("#designator").val("lower");
      var designator = $("#designator").val();
      feed_back(designator);
    });
    $(document).on("click", ".higher", function() {
      $("#designator").val("higher");
      var designator = $("#designator").val();
      feed_back(designator);
    });

        function fetch_profile_tab(
      person_new_tab_id = 0,
      slug_name_new_tab = 0
    ) {
      var person_id;
      var slug_name;
      if (person_new_tab_id != 0) {
        person_id = person_new_tab_id;
        slug_name = string_to_slug(slug_name_new_tab);
      } else {
        person_id = $("#person_id").val();
        var data = $("#person_id").select2("data");
        slug_name = string_to_slug(data[0].text);
      }

      if (window.location.hostname == "localhost") {
        var new_link =
          window.location.origin +
          "/website/result/" +
          person_id;
      } else {
        var new_link =
          window.location.origin +  "/result/" + person_id;
      }

      window.open(new_link, "_blank");
    }

Answer 1

如果尝试在href="javascript:;"标签中将href="#"替换为<a>怎么办？