如何使用javascript / jQuery將值分配給動態創建的輸入框

Question

我正在使用Jquery動態創建一些輸入字段，但需要在創建時分配值。 我在下面解釋我的代碼。

<input type="hidden" id="alldepdates" value="1,2,3,4">
<ul class="date_list input_fields_wrap">
<li><input type="text" name="ddates" id="ddates" value="1" readonly >
<a href="#" id="addbtn"><span style="margin-left:5px;min-width:20px;"><i class="fa fa-arrow-circle-down" style="font-size:18px;"></i></span></a><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>
</ul>

在這里，我在隱藏的輸入字段中有一些逗號分隔的字符串值，並且該逗號分隔的字符串的第一個元素顯示在只讀字段中。

 <script>
    $(function(){ 
        var wrapper = $(".input_fields_wrap");
        var addButton = $("#addbtn");
        $(addButton).click(function(){
           var alld=$("#alldepdates").val();
           var alldsplit=alld.split(",");
           var restArr=alldsplit.shift();
           if(restArr.length > 0){
               $(wrapper).append("<li><input type="text" name="ddates" id="ddates" value="+restArr[0]+" readonly ><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>");                                                      

$("#alldepdates").val(restArr.join(","));
          };
    });
    })
    </script>;

這里我需要的是，當用戶單擊down-arraow圖標時，將創建一個新字段，並且該逗號分隔的字符串的第一個值將始終分配給新字段，而當所有值都將被分配時，則不會再創建任何字段。

Answer 1

您沒有正確格式化htmlString 。 應該：

'<li><input type="text" name="ddates" id="ddates" value="'+alldsplit[0]+'" readonly ><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>'

盡管我更喜歡使用允許嵌入表達式的Template Literals 。

要將事件附加到動態創建的元素上，必須使用on() 。

 $(function(){ var wrapper = $(".input_fields_wrap"); $('body').on('click', 'a', function(){ var alld=$("#alldepdates").val(); var alldsplit=alld.split(","); alldsplit.shift(); if(alldsplit.length > 0){ $(wrapper).append(`<li><input type="text" name="ddates" id="ddates" value="${alldsplit[0]}" readonly ><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>`); $("#alldepdates").val(alldsplit.join(",")); }; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="hidden" id="alldepdates" value="1,2,3,4"> <ul class="date_list input_fields_wrap"> <li><input type="text" name="ddates" id="ddates" value="1" readonly > <a href="#" id="addbtn"><span style="margin-left:5px;min-width:20px;"><i class="fa fa-arrow-circle-down" style="font-size:18px;"></i></span></a><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li> </ul> 

Answer 2

$(document).on('click', "#addbtn", function() {
   var alld=$("#alldepdates").val();
   var alldsplit=alld.split(",");
   var restArr=alldsplit.shift();
   if(restArr.length > 0){
       $(wrapper).append('<li><input type="text" name="ddates" id="ddates" value="'+restArr[0]+'" readonly ><a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a></li>');                                                           
       $("#alldepdates").val(alldsplit.join());
  };

Answer 3

您可以輕松做到。 您只需要知道array.shift會刪除並返回array的第一個元素。

$(function () {
  var wrapper = $('.input_fields_wrap');
  var addButton = $('#addbtn');

  $(addButton).click(function () {
    var alld = $('#alldepdates').val();
    var alldsplit = alld.split(',');
    var removedArrayElement = alldsplit.shift();
    if (alldsplit.length > 0) {

      var inputMarkup = '<input type="text" name="ddates" id="ddates_' + alldsplit.length + '" value="' + removedArrayElement + '" readonly />';
      var anchorMarkup = '<a class="btn btn-xs btn-action mob-m-button pull-right" style="padding: 2px 4px;" href="#">Book Now</a>';

      $(wrapper).append('<li>' + inputMarkup + anchorMarkup + '</li>');

      $("#alldepdates").val(alldsplit.join(','));
    };
  });
});