gpt4 book ai didi

javascript - 我无法在输入字段上应用颜色选择器 js(jscolor.js)

转载 作者:搜寻专家 更新时间:2023-10-31 08:09:35 24 4
gpt4 key购买 nike

下面是我的代码html代码

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

第一次颜色选择器 js 应用于输入字段,但是当我动态添加更多颜色选择器字段时,颜色选择器 js 不适用于下一个输入字段。谁能解释一下为什么会这样?

最佳答案

您可以使用以下方法在添加的输入上初始化 jsColor:

new jscolor($('.jscolor').last()[0]);

注意:无需遍历所有输入。

$(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>

关于javascript - 我无法在输入字段上应用颜色选择器 js(jscolor.js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41100093/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com