同一类调用同一函数的多个输入字段不起作用

Question

我正试图从多个输入字段调用同一个ajax函数。我紧随其后当我测试该代码时，它对我有效。但当我在我的视图中应用相同的代码时，却不起作用。

这是我的html代码：

<div class="col-md-12 field">
<div class="row">
<div class="col-md-3">
<label for="brands[]" class="control-label" style="width:100%">BR-NO</label>
<input class="mytextbox" type="text" style="width:100%;" name="brands[]" required>
<div id="brList" style="width:auto;"></div>
</div>
<div class="col-md-4" style="margin-top:2%;" > 
<button class="btn btn-round btn-primary add_form_field" type="button" id="add_form_field"><i class="now-ui-icons ui-1_simple-add"></i></button> 
</div> 
</div>
</div>

添加按钮将新行添加到div类字段中。因此，新行是动态生成的。我使用以下代码：

//For Brands Add 
$(document).ready(function() {
var max_fields      = 5;
var wrapper         = $(".field");
var add_button      = $(".add_form_field");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div class="row"><div class="col-md-3"><label for="brands[]" class="control-label" style="width:100%">BR-NO</label><input class="mytextbox" type="text" style="width:100%;" name="brands[]" required> <div id="brList" style="width:auto;"></div></div><div class="col-md-4"><a href="#" class="delete btn btn-round btn-primary"><i class="now-ui-icons ui-1_simple-remove"></i></a></div></div>');
}
else
{
swal({
title: "Warning",
text: "Cannot add more than 5 brands",   
icon: "warning",
})
}
});
$(wrapper).on("click",".delete", function(e){
e.preventDefault(); $(this).parent().parent('div').remove(); x--;
})
});

我要附加的行是带有remove按钮的字段类中的行。

下面的内容用于为动态添加的每个输入字段调用警报。

$(document).ready(function(){
$('.mytextbox').keyup(function(){
alert( $(this).val());
});
});

当函数被调用时，它只被第一个输入字段调用。动态生成的其余输入字段不会调用该函数。有人能帮我解决这个问题吗？

这里的代码是剪切的

//For Brands Add 
$(document).ready(function() {
var max_fields      = 5;
var wrapper         = $(".field");
var add_button      = $(".add_form_field");
var x = 1;
//generate input fields dynamicially
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div class="row"><div class="col-md-3"><label for="brands[]" class="control-label" style="width:100%">BR-NO</label><input class="mytextbox" type="text" style="width:100%;" name="brands[]" required> <div id="brList" style="width:auto;"></div></div><div class="col-md-4"><a href="#" class="delete btn btn-round btn-primary"><i class="now-ui-icons ui-1_simple-remove"></i></a></div></div>');
}
else
{
swal({
title: "Warning",
text: "Cannot add more than 5 brands",   
icon: "warning",
})
}
});
$(wrapper).on("click",".delete", function(e){
e.preventDefault(); $(this).parent().parent('div').remove(); x--;
});

//this only works on first input
$('.mytextbox').keyup(function(){
alert( $(this).val());
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 field">
<div class="row">
<div class="col-md-3">
<label for="brands[]" class="control-label" style="width:100%">BR-NO</label>
<input class="mytextbox" type="text" style="width:100%;" name="brands[]" required>
<div id="brList" style="width:auto;"></div>
</div>
<div class="col-md-4" style="margin-top:2%;" > 
<button class="btn btn-round btn-primary add_form_field" type="button" id="add_form_field"><i class="now-ui-icons ui-1_simple-add"></i></button>  
</div> 
</div>
</div>

Answer 1

您可以使用事件委派，您需要的就是这样。因为单击按钮时添加的是运行时的文本框，所以它不会被事件绑定，所以您可以在这里了解更多信息。

$(document).on("keyup",".mytextbox",function(){

演示：

$(document).ready(function() {
var max_fields = 5;
var wrapper = $(".field");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div class="row"><div class="col-md-3"><label for="brands[]" class="control-label" style="width:100%">BR-NO</label><input class="mytextbox" type="text" style="width:100%;" name="brands[]" required> <div id="brList" style="width:auto;"></div></div><div class="col-md-4"><a href="#" class="delete btn btn-round btn-primary"><i class="now-ui-icons ui-1_simple-remove"></i></a></div></div>');
} else {
swal({
title: "Warning",
text: "Cannot add more than 5 brands",
icon: "warning",
})
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent().parent('div').remove();
x--;
})
});
$(document).ready(function() {
$(document).on("keyup", ".mytextbox", function() {
alert($(this).val());
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 field">
<div class="row">
<div class="col-md-3">
<label for="brands[]" class="control-label" style="width:100%">BR-NO</label>
<input class="mytextbox" type="text" style="width:100%;" name="brands[]" required>
<div id="brList" style="width:auto;"></div>
</div>
<div class="col-md-4" style="margin-top:2%;">
<button class="btn btn-round btn-primary add_form_field" type="button" id="add_form_field"><i class="now-ui-icons ui-1_simple-add"></i></button>
</div>
</div>
</div>

Answer 2

当您添加一个HTML元素，并且您想在它上面创建一个事件时，您必须在这个新元素上创建一个新事件。因为脚本只加载一次，所以添加的元素不会接受类的事件。

示例：

<body>
<button id ="add_span"> ADD SPAN</button>
<div>
<span class="click">Click</span>
</div>
</body>

使用当前脚本：

$(document).ready(function () {
$("#add_span").click(function () {
$('div').append("  <span class='click'>Click</span>");
});
$('.click').click(function () {
alert("click");
});
});

当你点击按钮时，它会添加一个新的跨度。但是新的跨度将没有onClick事件。因此，要做到这一点，你必须重新创建你的活动。只要你想创建一个新的HTML元素并在上面绑定一个事件。

新脚本：

$(document).ready(function () {
$("#add_span").click(function () {
$('div').append("  <span class='click'>Click</span>");
$('.click').click(function () {
alert("click");
});
})
$('.click').click(function () {
alert("click");
});
});

Answer 3

您还必须将keyup事件添加到新的输入字段中：

(...).find("input").keyup(function() {
alert($(this).val());
});

$(document).ready(function() {
var max_fields = 5;
var wrapper = $(".field");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
var newInput = $('<div class="row"><div class="col-md-3"><label for="brands[]" class="control-label" style="width:100%">BR-NO</label><input class="mytextbox" type="text" style="width:100%;" name="brands[]" required> <div id="brList" style="width:auto;"></div></div><div class="col-md-4"><a href="#" class="delete btn btn-round btn-primary"><i class="now-ui-icons ui-1_simple-remove"></i></a></div></div>').find("input").keyup(function() {
alert($(this).val());
});
$(wrapper).append(newInput);
} else {
swal({
title: "Warning",
text: "Cannot add more than 5 brands",
icon: "warning",
})
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent().parent('div').remove();
x--;
})
});
$(document).ready(function() {
$('.mytextbox').keyup(function() {
alert($(this).val());
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 field">
<div class="row">
<div class="col-md-3">
<label for="brands[]" class="control-label" style="width:100%">BR-NO</label>
<input class="mytextbox" type="text" style="width:100%;" name="brands[]" required>
<div id="brList" style="width:auto;"></div>
</div>
<div class="col-md-4" style="margin-top:2%;">
<button class="btn btn-round btn-primary add_form_field" type="button" id="add_form_field"><i class="now-ui-icons ui-1_simple-add"></i></button>
</div>
</div>
</div>