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

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()中调用$('#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> 

因此，在此：

-下拉选择框：ID“ pickhour”

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

• 我的脚本过去.val()在我的选择框中获取选定值的.val() ，并将其放在指向我的按钮的.attr() href链接中。

有问题的：

如果我在主页上没有显示选择框+按钮+脚本，而未在其他位置调用它：它将正常工作！

如果我想在$('#mainbuy').html()以$('#myAPI').html()显示<div id="mainbuy" style="display:none;"> ：每个喜欢的元素都应该，但是脚本不起作用，我的按钮上没有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/");
});