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

Question

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

所有这些的上下文都是API，所以我必须对ajax调用外部JSon文件。该电话有效：我收到回复，并且可以像我想要的那样管理数据。

jQuery(function($) { 
 
    $.ajax({ \t 
 
\t   url: 'http://MY JSON URL/', 
 
\t \t contentType: "application/json; charset=windows-1252", 
 
\t   dataType: "json", 
 
\t   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"); \t \t \t \t 
 
\t \t \t }, 
 
\t \t \t /* Error */ 
 
\t \t  error: function(xhr, status, error){ 
 
\t \t    alert("No Json" + xhr.status); 
 
\t \t  }, 
 
\t \t \t 
 
\t \t \t \t  
 
\t \t });

正如你所看到的，我叫$('#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"> 
 
    \t \t \t \t \t \t <option value="1">1H</option> 
 
    \t \t \t \t \t \t <option value="2" selected>2H</option> 
 
    \t \t \t \t \t \t <option value="3">3H</option> 
 
\t \t \t \t \t \t <option value="4">4H</option> 
 
    \t \t \t \t \t </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"> 
 
\t $(document).ready(function(){ 
 
      $('#pickhour').change(function(){ 
 
       pickhour1 = $(this).val(); 
 
       $("#egglink").attr("href", "http://my-link/" + pickhour1 + "/end/of/my/link/"); 
 
\t \t \t \t \t }); 
 
\t \t \t  }); 
 
       </script> 
 
        </div>

所以，在这样的：

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

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

• 我的脚本用于获取s的.val()在我的选择框中选出一个值，然后将它放在一个链接中，这个链接对我的按钮是href = .attr()。

的问题：

如果我表现出了选择框+按键+不调用其他地方在我的主网页脚本：它工作正常！

如果我想在$('#myAPI').html()中显示<div id="mainbuy" style="display:none;">与$('#mainbuy').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不很聪明，实际上林失去了在这一点，似乎很容易和工作，但它不是.. :(

谢谢你的readind，我希望有人在这里可以帮助我

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属性。也许这是你的问题。

尝试在您的按钮添加A 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/"); 
});