2017-08-02 11 views
0

timepicki jqueryプラグインを使用して簡単なテキスト入力ができました。私は正常に私の最初のテキスト入力にプラグインを使用することができますが、私はそれが表示されるように配列によって作成された追加の入力でそれを使用することはできません。 timepicker入力のすべてのインスタンスがtimepickerプラグインを使用できるように、どのようにそれを有効にすることができますすることができます -入力配列にjavascriptプラグインを使用する際の問題

<script> 

    $(document).ready(function() { 
var max_fields  = 10; //maximum input boxes allowed 
var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
var add_button  = $(".add_field_button"); //Add button ID 


var x = 1; //initlal text box count 

$('#timepicker').timepicki(); //Call Timepicki plugin for #timepicker ID 
$(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><input type="text" name="timepicker[]"/><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> 

<html> 
Ring Time: 
<div class="input_fields_wrap"> 
    <button class="add_field_button">Add More Fields</button> 
    <div><input type="text" id='timepicker' type='text'name='timepicker[]'"></div> 
</div><br><br> 
</html> 

私の質問はありますか?

ありがとうございます!

+1

にアタッチする必要があります新しい入力を作成した後は、それぞれの新しい入力にプラグインします。 –

答えて

1

それは

$('.timepicker').timepicki(); //class instead of id 

を動作させる必要がある変更のカップルをTheresのとあなたのHTMLとJavaScript

<input type="text" class="timepicker" name="timepicker[]" /> 
クリック機能で

$(add_button).click(function(e){ 
e.preventDefault(); 
if(x < max_fields){ 
x++; 
$(wrapper).append('<div><input type="text" class="timepicker" name="timepicker[]"/><a href="#" class="remove_field">Remove</a></div>'); 
} 
$('.timepicker').timepicki(); 
}); 
+0

それはうまくいった。ありがとう!私はまだJSを学んでいます。その多くはPHPやC#とは異なります。 –

+1

いいえ、汗、幸せなコーディング! –

関連する問題