javascript - jQuery函数无法克隆
[英]javascript - jQuery functions not working on cloned
问题描述
I have a problem with j query function calculate date after clone, i need to auto calculate how many days after user select check in and check out date and put it in textbox , its working for first row but not working with cloned rows 
我有一个问题，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 个解决方案
解决方案1
1 已采纳 2018-09-20 23:27:47
There are lot of issues in the snippet you shared, you are trying to using ID in the original element and cloning it, this is a bad idea for your use case. 您共享的代码段中存在很多问题，您尝试在原始元素中使用ID并克隆它，这对您的用例来说是个坏主意。 What you can do is convert it to class, and pass the target element in cal(). 你可以做的是将它转换为class，并在cal（）中传递target元素。 by doing that you can find the element. 通过这样做，你可以找到元素。 And your label for nights is not closed properly 而且你的夜晚标签没有正确关闭
replace your exiting script block 替换您现有的脚本块
<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>
and replace your .personal-details html block with this 并用此替换你的.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 />
This should solve the problem 这应该可以解决问题
解决方案2
0 2018-09-20 23:18:00
您在克隆的函数调用中使用相同的id。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.