为什么我的jQuery脚本只执行一次?

问题描述:

我有我的jQuery UI日期选取器的问题。我有这样的代码:为什么我的jQuery脚本只执行一次?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> 
 
<script> 
 
    jQuery(document).ready(function($) { 
 
    $('#datepickerFrom').datepicker({ 
 
     dateFormat: 'yy-m-d', 
 
     inline: true, 
 
     onSelect: function(dateText, inst) { 
 
     var date = $(this).datepicker('getDate'), 
 
      day = date.getDate(), 
 
      month = date.getMonth() + 1, 
 
      year = date.getFullYear(); 
 

 
     var url = $('#reservation').attr('href'); 
 
     url = url.replace('05&', day + '&'); 
 
     $('#reservation').attr('href', url); 
 

 
     var url2 = $('#reservation').attr('href'); 
 
     url2 = url2.replace('12', month); 
 
     $('#reservation').attr('href', url2); 
 

 
     var url3 = $('#reservation').attr('href'); 
 
     url3 = url3.replace('2016', year); 
 
     $('#reservation').attr('href', url3); 
 
     } 
 
    }); 
 

 
    $('#datepickerTo').datepicker({ 
 
     dateFormat: 'yy-m-d', 
 
     inline: true, 
 
     onSelect: function(dateText, inst) { 
 
     var date = $(this).datepicker('getDate'), 
 
      day = date.getDate(), 
 
      month = date.getMonth() + 1, 
 
      year = date.getFullYear(); 
 

 
     var url4 = $('#reservation').attr('href'); 
 
     url4 = url4.replace('=2016', '=' + year); 
 
     $('#reservation').attr('href', url4); 
 

 
     var url5 = $('#reservation').attr('href'); 
 
     url5 = url5.replace('13', +month); 
 
     $('#reservation').attr('href', url5); 
 

 
     var url6 = $('#reservation').attr('href'); 
 
     url6 = url6.replace('09', day); 
 
     $('#reservation').attr('href', url6); 
 

 
     } 
 
    }); 
 
    }); 
 
</script> 
 
<p>Date arrivée : 
 
    <input type="text" id="datepickerFrom"> 
 
</p> 
 
<p>Date départ : 
 
    <input type="text" id="datepickerTo"> 
 
</p> 
 

 
<a id="reservation" class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="https://mywebsite.com/book?shs&chkin=2016-12-05&chkout=2016-13-09&step=1">Réservez</a>

当我点击日期(datepickerTo和datepickerFrom),它更新我的HREF链接,但只有一次。当我更改日期时,脚本不会执行。

+0

这是因为你正在寻找一个静态值:'url = url.replace('05&',day +'&');',当你第一次改变日期到一天!= 5'replace'函数将会没有找到替换的东西 – empiric

仅在自您搜索初始值并替换它们以来的第一次。检查你的验证码

var url = $('#reservation').attr('href'); 
url = url.replace('05&', day + '&'); 
$('#reservation').attr('href', url); 
var url2 = $('#reservation').attr('href'); 
url2 = url2.replace('12', month); 
$('#reservation').attr('href', url2); 
var url3 = $('#reservation').attr('href'); 
url3 = url3.replace('2016', year); 
$('#reservation').attr('href', url3); 

它基本上取代了“05”什么的某一天,“12”给定月份和“2016”给定的一年。当用户选择一个不同的日期时,这段代码找不到用这个新日期替代的东西。

+0

该死的我很笨,谢谢了很多! –

+0

Upvote done;) 但是我不知道如何动态更新我的href链接,你有什么想法吗? 这个href将始终是“&chkin = 2016-12-05&chkout = 2016-13-09&step = 1”...... –

+0

我不会取代href,而是取得新的日期,月份和年份的日期(在两个字段中),并且每次都重写href值。 –