javascript - jQuery函数无法克隆

Question

我有一个问题，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>

Answer 1

您共享的代码段中存在很多问题，您尝试在原始元素中使用ID并克隆它，这对您的用例来说是个坏主意。 你可以做的是将它转换为class，并在cal（）中传递target元素。 通过这样做，你可以找到元素。 而且你的夜晚标签没有正确关闭

替换您现有的脚本块

<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 />

这应该可以解决问题

Answer 2

您在克隆的函数调用中使用相同的id。

javascript - jQuery函数无法克隆

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-09-20 23:27:47

解决方案2
0 2018-09-20 23:18:00

javascript - jQuery函数无法克隆

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-09-20 23:27:47

解决方案2 0 2018-09-20 23:18:00

解决方案1
1 已采纳 2018-09-20 23:27:47

解决方案2
0 2018-09-20 23:18:00