Ajax onClick Safari iOS

Question

I have a custom WordPress plugin that uses a Javascript ajax onClick function to make a clickable element that rondomly selects an item from a dropdown list and then opens that selection in a new tab.

除了 iOS 上的 Safari 之外，該代碼在每個桌面和移動瀏覽器上都像夢一樣工作。

In Safari on iOS if you click the random button it succeeds in randomly selecting an option from the select list and shows the loading animation but it fails to load the new page from the selection.

似乎此錯誤與其他 safari 類似，僅 ajax onClick 錯誤自早期以來已詳細討論過除了我還沒有找到這個特定實現的解決方法。

我包含了發現錯誤的隨機按鈕和 select 列表的代碼，因為根據我迄今為止的研究，這可能是這兩個元素的交互導致了 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 Output

            <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:;"怎么辦？ <a>標簽中有href="#"嗎？