Question

如果你想了解我的问题，请阅读那些令我生气的糟糕代码的每一步：

所有这些的上下文是一个API，所以我必须对外部JSon文件进行ajax调用。通话有效：我得到了回复，我可以管理像我想要的数据。

jQuery(function($) {
  $.ajax({	
	        url: 'http://MY JSON URL/',
		contentType: "application/json; charset=windows-1252",
	        dataType: "json",
	        success: function(content) {
                  var api = content.contents.response // Dont care about this, it work.
                  var AnyDataFromJsonIWantToGet = api.data // Dont care about this, it work.

    $('#myAPI').html("Some HTML content, syntax checked" +
                    $('#mainbuy').html() 
                    + "Some HTML content, syntax checked");				
			},
			/* Error */
		    error: function(xhr, status, error){
		            alert("No Json" + xhr.status);
		    },
			
				    
		});

如您所见，我在$('#mainbuy').html()中致电$('#myAPI').html()。我的问题出在$('#mainbuy').html()，但只有在$('#myAPI').html()中调用时才会出现。以下是$('#mainbuy').html()的主要页面HTML代码，我保留了所有<div class>和其他<div>因为您可能会在其中找到我的问题的来源，但您稍后会看到为什么我认为它绝对不是我的CSS技巧。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="mainbuy" style="display:none;">
                   <div class="coachbtn"><div class="dropup"><div id="buybtn"> 
                      <select class="selectpicker" data-style="btn-primary" id="pickhour" name="pickhour">
   						 <option value="1">1H</option>
   						 <option value="2" selected>2H</option>
  				 		 <option value="3">3H</option>
				 		 <option value="4">4H</option>
  					   </select> 
                    </div></div></div>
                    <div class="coachbtn2"><div id="buybtn2">
                       <a id="egglink" class="button button-large" style="width: 260px">Reserver</a>
                    </div></div>
                     
  
  <script type="text/javascript">
	   $(document).ready(function(){
           $('#pickhour').change(function(){
              pickhour1 = $(this).val();
              $("#egglink").attr("href", "http://my-link/" + pickhour1 + "/end/of/my/link/");
					 });
			    }); 
                </script>
                    </div>

所以，在这：

-A下拉选择框：ID“pickhour”

-A按钮（<a></a> with style）：ID“egglink”

我的脚本用于在我的选择框中获取所选值的.val()，并将其放在.attr() href到我的按钮的链接中。

问题：

如果我在主页面中显示选择框+按钮+脚本而不在其他地方调用它：它工作正常！

如果我想在<div id="mainbuy" style="display:none;">中使用$('#mainbuy').html()显示$('#myAPI').html()：结果显示了类似的所有元素，但脚本不起作用，我的按钮上没有HREF。

我不知道它是否重要，但我使用Fancybox打开$('#myAPI').html()：

<div id="openAPI" style="display:none;width:auto;height:auto;">
    <div id ='myAPI'>
</div></div>

<a class="hover-wrap fancybox-media" data-fancybox-group="video" title=" " href="#openAPI">

我对JavaScript并不是很聪明，实际上我迷失在这里，它似乎很容易和有效，但它不是...... :(

感谢您的阅读，我希望有人能帮到我。

Answer 1

也许你的DOM没有更新（导致你的AJAX请求），试试这个：

$('#buybtn2').on('change' , '#pickhour' , function(){
    pickhour1 = $(this).val();
    $("#egglink").attr("href", "http://my-link/" + pickhour1 + "/end/of/my/link/");
});

我不知道是否有这项工作......

Answer 2

提前抱歉我的英语不好。

不是“＃buybtn2”，而是“#buybtn”对不起。

实际上，您尝试更改href属性，但此按钮没有任何href属性。也许这就是你的问题。

尝试在按钮上添加href：

<div class="coachbtn2">
     <div id="buybtn2">
         <a id="egglink" class="button button-large" href="" style="width: 260px">Reserver</a>
     </div>
</div>

Answer 3

对于最新版本的jquery attr，指的是最初的html。因此，更改它不会更新DOM。请尝试使用道具。

$('#buybtn2').on('change' , '#pickhour' , function(){
    pickhour1 = $(this).val();
    $("#egglink").prop("href", "http://my-link/" + pickhour1 + "/end/of/my/link/");
});

我的函数不起作用，Ajax调用，JQuery，外面调用？我不知道

3 个答案: