Menu
Below is my code html code
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jscolor-2.0.4/jscolor.js"></script>
<body>
<script>
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div>Case :<input type="text" name="mytext"> Color Picker : <input class="jscolor" name="c_picker"><br><a href="#" class="remove_field">Remove</a></div>');
}
});
$(wrapper).on("click",".remove_field", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
<form>
DB-URl :
<input type="text" name="firstname"><br/>
Username:
<input type="text" name="lastname"><br/>
Password:
<input type="password" name="Password"><br>
Table Name:
<input type="text" name="t_name"><br>
Color column:
<input type="text" name="c_column"><br>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div>Case :<input type="text" name="mytext"> Color Picker : <input class="jscolor" name="c_picker"><br></div>
</div>
<input type="submit" value="Update" id="updating">
</form>
First Time color picker js is apply on input field but when I add more color picker field dynamically color picker js is not apply on next input field. Can anybody explain me why this is happening?
977
You could init the jsColor on the added input using :
new jscolor($('.jscolor').last()[0]);
NOTE : No need to loop through all the inputs.
$(document).ready(function() {
$('.add_field_button').click(function(e){
e.preventDefault();
$('form').append('<div>Case :<input type="text" name="mytext"> Color Picker : <input class="jscolor" name="c_picker"><br><a href="#" class="remove_field">Remove</a></div>');
new jscolor($('.jscolor').last()[0]);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
<form>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<br><br>
<div>Case :<input type="text" name="mytext"> Color Picker : <input class="jscolor" name="c_picker"><br></div>
</div>
</form>Use jscolor() to bind the newly appended element:
$(document).ready(function () {
var max_fields = 10;
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var x = 1;
$(add_button).click(function (e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div>Case :<input type="text" name="mytext">Color Picker : <input class="jscolor" name="c_picker"><br><a href="#" class="remove_field">Remove</a></div>');
var color = new jscolor($(wrapper).find('input.jscolor:last')[0]);
//$(wrapper).find('input.jscolor:last').each(function () {
//var color = new jscolor($(this)[0]);
//});
}
});
$(wrapper).on("click", ".remove_field", function (e) {
e.preventDefault();
$(this).parent('div').remove(); x--;
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
