javascript - jQuery函数不适用于克隆的
javascript - jQuery函数不适用于克隆的
提问于 2018-09-21 06:46:11
我有一个问题的j查询功能计算日期后克隆，我需要自动计算多少天后，用户选择检入和检出日期，并把它放在文本框中，它工作的第一行，但不工作与克隆的行
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function GetDays(){
var dropdt = new Date(document.getElementById("drop_date").value);
var pickdt = new Date(document.getElementById("pick_date").value);
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
function cal(){
if(document.getElementById("drop_date")){
document.getElementById("numdays2").value=GetDays();
}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
var genroomid = 2;
$( ".add-row" ).click(function(){
var $clone = $( "ul.personal-details" ).first().clone();
var $input = $clone.find('#roomid');
$input.val(genroomid).attr('genroomid' , +genroomid)
$clone.append( "<button type='button' class='remove-row'>-</button>" );
$clone.insertBefore( ".add-row" );
genroomid++; // increase id by 1
});
$( ".form-style-9" ).on("click", ".remove-row", function(){
$(this).parent().remove();
genroomid--;
});
});
</script>
</head>
<body>
<form name="form_reservations" method="post" action="add.php">
<span class="form-style-9">
<ul class="personal-details">
<label for="roomid">RoomID</label>
<input name="roomid[]" type="text" class="stretchnights" id="roomid" readonly="readonly" value="1">
<label for="chkin">Check IN</label>
<input class="stretchdate" size="15" width="15" id="pick_date" type="date" name="chkin[]" onchange="cal()" required/>
<label for="chkout">Check Out</label>
<input class="stretchdate" id="drop_date" type="date" name="chkout[]" onchange="cal()" required/>
<label for="nights">Nights
<input class="stretchnights" type="text" id="numdays2" name="nights[]" readonly /></label>
</ul>
<button type="button" class="add-row">+ New Client</button>
</span>
</form>
</body>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-21 07:27:47
您共享的代码片段中有很多问题，您试图在原始元素中使用ID并克隆它，这对您的用例来说是一个坏主意。您可以做的是将其转换为class，并在cal()中传递目标元素。这样你就可以找到元素了。而且你晚上的标签没有正确关闭
替换现有的脚本块
<script type="text/javascript">
function GetDays(target){
var dropdt = new Date($(target).find(".drop_date").val());
var pickdt = new Date($(target).find(".pick_date").val());
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
function cal(target){
console.log($(target).parent(), $(target).parent().find('numdays2'));
$(target).parent().find('.numdays2').val(GetDays($(target).parent()));
}
</script>并用下面的代码替换您的.personal-details html块
<ul class="personal-details">
<label for="roomid">RoomID</label>
<input name="roomid[]" type="text" class="stretchnights" id="roomid" readonly="readonly" value="1">
<label for="chkin">Check IN</label>
<input size="15" width="15" id="pick_date" class="pick_date" type="date" name="chkin[]" onchange="cal(this)" required/>
<label for="chkout">Check Out</label>
<input id="drop_date" type="date" name="chkout[]" class="drop_date" onchange="cal(this)" required/>
<label for="nights">Nights </label>
<input class="numdays2" type="text" id="numdays2" name="nights[]" readonly />
这应该可以解决问题。
Stack Overflow用户
发布于 2018-09-21 07:18:01
您在克隆的函数调用中使用相同的id。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52434345
复制相关文章
相似问题