Javascript Jquery Mobile-Mobile Safari上弹出窗口中的URL

Javascript Jquery Mobile-Mobile Safari上弹出窗口中的URL,javascript,jquery,html,css,jquery-mobile,Javascript,Jquery,Html,Css,Jquery Mobile,在过去的4个小时里,我正面临一个让我发疯的问题 我在页面上使用Jquery Mobile创建一个模式/弹出窗口。此弹出窗口有5个包含href链接的容器。当在移动浏览器上打开页面并加载弹出窗口时,容器垂直下落,用户必须向下滚动并选择必要的链接才能继续 在除Mobile safari之外的所有浏览器上,我都可以向下滚动到任何链接,然后单击它们,链接就会加载。然而,在Mobile Safari上,只有前两个链接是可点击的。当您单击其他任何一个时,它会跳转到模式窗口的顶部&URL带有下划线。这类似于您在

在过去的4个小时里,我正面临一个让我发疯的问题

我在页面上使用Jquery Mobile创建一个模式/弹出窗口。此弹出窗口有5个包含href链接的容器。当在移动浏览器上打开页面并加载弹出窗口时,容器垂直下落,用户必须向下滚动并选择必要的链接才能继续

在除Mobile safari之外的所有浏览器上,我都可以向下滚动到任何链接,然后单击它们,链接就会加载。然而,在Mobile Safari上,只有前两个链接是可点击的。当您单击其他任何一个时,它会跳转到模式窗口的顶部&URL带有下划线。这类似于您在任何带有文本链接的页面上通过选项卡浏览链接时所看到的情况

除了href url之外,所有容器的代码都是相同的,但我已经检查过了&它们都在mobilechrome/firefox中工作

如果您能提供任何指导/提示来调试和了解mobile safari为何如此奇怪,我将不胜感激

编辑:添加代码:

模式窗口包含一些javascript定义的链接(即,用户更改一些下拉列表,这会更改模式窗口中的URL:

<script type="text/javascript">
$(document).ready(function(e) {
$('.button_change').change(function(e) {

var an = $(this).val();
var d1 = $("#id_1").find(":selected").attr("name");
var d2 = $("#id_2").find(":selected").attr("value");
var d3 = $("#id_3").find(":selected").attr("value");
var d5 = $("#id_4").find(":selected").attr("value");
    var d4 = $("#id_5").find(":selected").attr("value");


var option1_url = ("https://localhost:8888/register/" + d4 + d1 + "/plan1" + "/?utm_term=" + d3  + "&utm_medium=" + d5);
var option2_url = ("https://localhost:8888/register/" + d4 + d1 + "/plan2" +"/?utm_term=" + d3 + "&utm_medium=" + d5);
var option3_url = ("hhttps://localhost:8888/register/" + d4 + d1 + "/plan3" +"/?utm_term=" + d3  + "&utm_medium=" + d5);
var option4_url = ("https://localhost:8888/register/" + d4 + d1 + "/plan4" +"/?utm_term=" + d3 + "&utm_medium=" + d5);
var popup_modal =("#myPopupDialog");

$('.button-plans1 a').attr('href',option1_url);
$('.button-plans2 a').attr('href',option2url);
$('.button-plans3 a').attr('href',option3_url);
$('.button-plans4 a').attr('href',option4_url);


});
});
</script>

$(文档).ready(函数(e){
$('.button_change').change(函数(e){
var an=$(this.val();
var d1=$(“#id_1”).find(“:selected”).attr(“name”);
var d2=$(“#id_2”).find(“:selected”).attr(“value”);
变量d3=$(“#id_3”).find(“:selected”).attr(“value”);
var d5=$(“#id_4”).find(“:selected”).attr(“value”);
var d4=$(“#id_5”).find(“:selected”).attr(“value”);
var option1_url=(“https://localhost:8888/register/“+d4+d1+”/plan1“+”/?utm_term=“+d3+”&utm_medium=“+d5”);
var option2_url=(“https://localhost:8888/register/“+d4+d1+”/plan2“+”/?utm_term=“+d3+”&utm_medium=“+d5”);
变量选项3_url=(“hhttps://localhost:8888/register/“+d4+d1+”/plan3“+”/?utm_term=“+d3+”&utm_medium=“+d5”);
var option4_url=(“https://localhost:8888/register/“+d4+d1+”/plan4“+”/?utm_term=“+d3+”&utm_medium=“+d5”);
var popup_modal=(“#myPopupDialog”);
$('.button-plans1 a').attr('href',option1_url);
$('.button-plans2a').attr('href',option2url);
$('.button-plans3 a').attr('href',option3_url);
$('.button-plans4 a').attr('href',option4_url);
});
});
HTML:

<div class="btn btn-primary button-plans-popup clickable">
      <a class="button-color" href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade">NEXT</a>
</div>

<div data-role="main" class="ui-content">

    <div data-role="popup" id="myPopupDialog" data-overlay-theme="b">
      <div data-role="header">
        <h1>Modal Window</h1>
      </div>

      <div data-role="main" class="ui-content">



<div class="selection-types">


  <div class="module option1" style='display:none;' id='option1'>
     <div class="inner">     
        <div class="button-plans1">
      <a href="/signup/option1/" class="button">Register for Plan 1</a>
      </div>
    </div>
  </div>

        <div class="module option2" style='display:none;' id='option2'>

    <div class="inner">


        <div class="button-plans2">
      <a href="/signup/option2/" class="button">Register for Plan 2</a>
    </div>
    </div>
  </div>



  <div class="module option3" style='display:none;' id='option3'>

    <div class="inner">

        <div class="button-plans3">
      <a href="/signup/option3/" class="button">Register for Plan 3</a>
      </div>
    </div>
  </div>

  <div class="module option4" style='display:none;' id='option4'>

    <div class="inner">


        <div class="button-plans4">
      <a href="/signup/option4/" class="button">Register for Plan 4</a>
      </div>
    </div>
  </div>

模态窗口

你能提供一些代码吗?我看到代码中有很多错误。你能找到它们并修复它们吗?也许它们与问题有关。(提示:它们与变量名有关)。此外,是否有可能某些URL引用不存在?我认为需要进行更多的自我调试。谢谢bcdan。我将清除代码,但结果表明不仅仅是链接。它正在单击对话框窗口下半部分的任意位置:(你能提供一些代码吗?我在代码中看到了一些错误。你能找到它们并修复它们吗?也许它们与问题有关。(提示:它们与变量名有关)。此外,是否有可能某些URL引用不存在?我认为需要进行更多的自我调试。谢谢bcdan。我将清除代码,但结果表明不仅仅是链接。它正在单击对话框窗口下半部分的任意位置:(