自舉時鐘選擇器動態輸入

Question

在參考下面的自舉代碼我試圖實現時鐘選擇器的動態輸入，在這裏我用wrapper.append（）來實現clockpicker文本框和其他2文本框一個按鈕（添加）。

<div style="height:70px;"></div> 
    <div class="container-fluid" > 
      <form role="form" name="frm" class="col-xs-12" action ="timeslot" method="post" 
      onSubmit="return valid2()"> 

      <div class="form-group"> 
        <label for="name" >Slot Name</label> 
        <input type="text" name="slotname" class="form-control col-xs-6" placeholder="Time Slot name" > 
      </div> 
       <div style="height:30px;"></div> 
      <div class="form-group row"> 
      <div class="col-xs-6"> 
        <label for="name" >Time Slot</label> 
        <input type="text" name="timeslot1" class="form-control col-xs-6" placeholder="Time Slot name" > 
      </div> 
      <div class="col-xs-6"> 
        <label for="name">Slot Available</label> 
        <input type="text" name="slotavailable1" class="form-control" placeholder="Slot available" > 
      </div> 
      </div> 

      <label for="name" >Time</label> 
      <div class=" form-group row"> 
       <div class="form-group clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" > 
        <input type="text" id="start_time1" name="start_time1" class="form-control" value="09:30"> 
        <span class="form-group-addon"> 
         <span class="glyphicon glyphicon-time "></span> 
        </span> 
       </div> 

       <div class="form-group clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" > 
        <input type="text" id="end_time1" name="end_time1" class="form-control" value="09:30"> 
        <span class="form-group-addon"> 
         <span class="glyphicon glyphicon-time"></span> 
        </span> 
       </div> 
      </div> 

      <div class="input_fields_wrap form-group"> 
       <button class="add_field_button btn btn-info">Add</button> 
      </div> 
      <div style="height:30px;"></div> 
      <div class="form-group"> 
        <button type="submit" id="submit" class="btn btn-info" onkeyup="count(this.value)" name="submit">SUBMIT</button> 
      </div> 
     </div> 
      </form> 

      <script type="text/javascript"> 
      jQuery(function($) { 
       $('.clockpicker').clockpicker({ 
        placement: 'top', 
        align: 'left', 
        donetext: 'Done' 
       }); 
     // The line below "closes" the document ready function 
     }); 
      </script> 
      <script> 
      $(document).ready(function() { 
       var max_fields  = 15; //maximum input boxes allowed 
       var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
       var add_button  = $(".add_field_button"); //Add button ID 

       var x = 2; //initlal text box count 
       $(add_button).click(function(e){ //on add input button click 
        e.preventDefault(); 
        if(x < max_fields){ //max input box allowed 
         x++; //text box increment 
         $(wrapper).append('<div> <div style="height:30px;"></div>'+ 
           '<div class="form-group row">'+ 
         '<div class="col-xs-6">'+ 
          '<label for="name"+x >Time Slot</label>'+ 
          '<input type="text" name="timeslot"+x class="form-control col-xs-6" placeholder="Time Slot name" ></div>'+ 
         '<div class="col-xs-6">'+ 
          '<label for="name"+x>Slot Available</label>'+ 
          '<input type="text" name="slotavailable"+x class="form-control" placeholder="Slot available" >'+ 
         '</div>'+ 
         '</div>'+ 

         '<label for="name"+x >Time</label>'+ 
         '<div class=" form-group row">'+ 
         '<div class="form-group clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" >'+ 
          '<input type="text" id="start_time"+x name="start_time"+x class="form-control" value="09:30">'+ 
          '<span class="form-group-addon">'+ 
           '<span class="glyphicon glyphicon-time "></span>'+ 
          '</span>'+ 
          '</div>'+ 

          '<div class="form-group clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" >'+ 
           '<input type="text" id="end_time"+x name="end_time"+x class="form-control" value="09:30">'+ 
           '<span class="form-group-addon">'+ 
            '<span class="glyphicon glyphicon-time"></span>'+ 
           '</span>'+ 
          '</div>'+ 
          '</div>'+ 

         '<a href="#" class="remove_field">Remove</a></div>'); //add input box 
          } 
       }); 

       $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
        e.preventDefault(); $(this).parent('div').remove(); x--; 
       }) 
      }); 
      </script> 

ps：對於冗長的代碼抱歉。 感謝@cale_b幫助我處理以前的文章。

Answer 1

我將包括比原來的問題更多，只是爲了幫助 - 因爲有些事情會讓您的生活更容易前進。

小費：您不需要單獨的<script>塊，也不需要具有單獨的文檔就緒功能。

解決方案：爲了使您的clockpicker能夠動態添加元素，您需要在bind之後動態添加它們。

最有組織的方式做，這是創建結合您的clockpicker元素的函數，然後調用這個函數在需要的時候：

// Script tags do not need type="text/javascript", so I've removed 
<script> 
jQuery(function($) { 
    // The original "clockpicker" code is moved to the bottom in a function 
    // No need to close and re-open script tags, so I've removed those 
    // No need for a new "document ready" function, so I've removed that 
    var max_fields  = 15; //maximum input boxes allowed 
    var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
    var add_button  = $(".add_field_button"); //Add button ID 

    var x = 2; //initlal text box count 
    $(add_button).click(function(e) { //on add input button click 
     e.preventDefault(); 
     if(x < max_fields) { //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div> <div style="height:30px;"></div>'+ 
       '<div class="form-group row">'+ 
        '<div class="col-xs-6">'+ 
         '<label for="name"+x >Time Slot</label>'+ 
         '<input type="text" name="timeslot"+x class="form-control col-xs-6" placeholder="Time Slot name" ></div>'+ 
        '<div class="col-xs-6">'+ 
         '<label for="name"+x>Slot Available</label>'+ 
         '<input type="text" name="slotavailable"+x class="form-control" placeholder="Slot available" >'+ 
        '</div>'+ 
       '</div>'+ 
       '<label for="name"+x >Time</label>'+ 
       '<div class=" form-group row">'+ 
        '<div class="form-group clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" >'+ 
         '<input type="text" id="start_time"+x name="start_time"+x class="form-control" value="09:30">'+ 
         '<span class="form-group-addon">'+ 
          '<span class="glyphicon glyphicon-time "></span>'+ 
         '</span>'+ 
        '</div>'+ 
        '<div class="form-group clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" >'+ 
         '<input type="text" id="end_time"+x name="end_time"+x class="form-control" value="09:30">'+ 
         '<span class="form-group-addon">'+ 
          '<span class="glyphicon glyphicon-time"></span>'+ 
         '</span>'+ 
        '</div>'+ 
       '</div>'+ 
      '<a href="#" class="remove_field">Remove</a></div>'); //add input box 
      // NEW: Bind to the newly added clockpicker element 
      bindClockPicker(); 
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); 
     x--; 
    }); 

    // This function "binds" the clockpicker 
    function bindClockPicker() { 
     $('.clockpicker').clockpicker({ 
      placement: 'top', 
      align: 'left', 
      donetext: 'Done' 
     }); 
    } 

    // Last but not least, call this to bind to any existing clockpicker elements 
    bindClockPicker(); 
}); 

</script>