我的函數不工作，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/"); 
});