如何在jQuery中使用生成的选择值?

你好，我试图在表中生成一个新行，如果用户在下拉菜单中选择(AND或or)，将生成具有相同字段的新行，它在第一行上工作，但当我试图在生成行上选择时，它不起作用

这是jQuery中的脚本，我试图在选择上添加on更改，但它没有完成工作

$(function () {
$('.sell').on('change', function () {
var id = $(this).closest("table.table-review").attr('id');  // Id of particular table
var val = $(this).val();
if(val == "AND" || val =="OR"){
console.log(id);
var div = $("<tr />");
div.html(GetDynamicTextBox(id));
$("#"+id+"_tbody").append(div);
}
});
$(document).on("click", "#comments_remove", function () {
$(this).closest("tr").prev().find('td:last-child').html('<button type="button" class="btn btn-danger" id="comments_remove"><i class="fa fa-trash-o"></i></button>');
$(this).closest("tr").remove();
});
function GetDynamicTextBox(table_id) {
//$('#comments_remove').remove();
var rowsLength = document.getElementById(table_id).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length+1;
return '<td>'+rowsLength+'</td>' + 
'<td><select  name = "DynamicTextBox" class="select form-control " value = ""><option>Field Name</option><option>Div Awada</option><option>Div Vlad</option></select></td>' +
'<td><select  name = "DynamicTextBox" class="select form-control " value = ""><option>Field Name</option><option>Equals</option><option>Greater than</option></select></td>' +
'<td><input type="text" name = "DynamicTextBox" class="form-control" value = "" placeholder="Enter Value" ></td>' + 
'<td><select class="form-control sell" name="argSelect" onchange="genfun()" id="mySelect"><option value="Arg">Argument</option><option value="AND">AND</option><option value="OR">OR</option><option value="ONLY">ONLY</option></select></td>' +
'<td><button type="button" class="btn btn-danger" id="comments_remove"><i class="fa fa-trash-o"></i></button></td>'
}
function genfun(){
var id = $(this).closest("table.table-review").attr('id');  // Id of particular table
var val = document.getElementById("mySelect").value;
if(val == "AND" || val =="OR"){
console.log(id);
var div = $("<tr />");
div.html(GetDynamicTextBox(id));
$("#"+id+"_tbody").append(div);
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-review review-table mb-0" id="table_achievements">
<thead>
<tr>
<th style="width:40px;"></th>
<th></th>
<th></th>
<th></th>
<!-- <th style="width: 64px;"><button type="button" class="btn btn-primary btn-add-row"><i class="fa fa-plus"></i></button></th> -->
</tr>
</thead>
<tbody id="table_achievements_tbody">
<tr>
<th>1</th>
<th>
<select class="form-control">
<option>Field Name</option>
<option>Div Awada</option>
<option>Div Vlad</option>
</select>
</th>
<th>
<select class="form-control">
<option>Equals</option>
<option>Greater than</option>
<option>Less than</option>
</select>
</th>
<th><input type="text" id="text2" class="form-control" placeholder="Enter Value" ></th>
<th style="width: 120px;">
<select class="form-control sell" name="argSelect" >
<option value="Arg">Argument</option>
<option value="AND">AND</option>
<option value="OR">OR</option>
<option value="ONLY">ONLY</option>
</select>
</th>
<th style="width:92.56px;"></th>
</tr>
</tbody>
</table>
</div>

为了避免这个问题并避免多次使用相同的代码，您可以为您的.change事件使用事件委托。

使用$(document).on('change','.sell', function() {并删除genfun函数;

$(function() {
$(document).on('change','.sell', function() {
var id = $(this).closest("table.table-review").attr('id'); // Id of particular table
var val = $(this).val();
if (val == "AND" || val == "OR") {
console.log(id);
var div = $("<tr />");
div.html(GetDynamicTextBox(id));
$("#" + id + "_tbody").append(div);
}
});
$(document).on("click", "#comments_remove", function() {
$(this).closest("tr").prev().find('td:last-child').html('<button type="button" class="btn btn-danger" id="comments_remove"><i class="fa fa-trash-o"></i></button>');
$(this).closest("tr").remove();
});
function GetDynamicTextBox(table_id) {
//$('#comments_remove').remove();
var rowsLength = document.getElementById(table_id).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length + 1;
return '<td>' + rowsLength + '</td>' +
'<td><select  name = "DynamicTextBox" class="select form-control " value = ""><option>Field Name</option><option>Div Awada</option><option>Div Vlad</option></select></td>' +
'<td><select  name = "DynamicTextBox" class="select form-control " value = ""><option>Field Name</option><option>Equals</option><option>Greater than</option></select></td>' +
'<td><input type="text" name = "DynamicTextBox" class="form-control" value = "" placeholder="Enter Value" ></td>' +
'<td><select class="form-control sell" name="argSelect" id="mySelect"><option value="Arg">Argument</option><option value="AND">AND</option><option value="OR">OR</option><option value="ONLY">ONLY</option></select></td>' +
'<td><button type="button" class="btn btn-danger" id="comments_remove"><i class="fa fa-trash-o"></i></button></td>'
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-review review-table mb-0" id="table_achievements">
<thead>
<tr>
<th style="width:40px;"></th>
<th></th>
<th></th>
<th></th>
<!-- <th style="width: 64px;"><button type="button" class="btn btn-primary btn-add-row"><i class="fa fa-plus"></i></button></th> -->
</tr>
</thead>
<tbody id="table_achievements_tbody">
<tr>
<th>1</th>
<th>
<select class="form-control">
<option>Field Name</option>
<option>Div Awada</option>
<option>Div Vlad</option>
</select>
</th>
<th>
<select class="form-control">
<option>Equals</option>
<option>Greater than</option>
<option>Less than</option>
</select>
</th>
<th><input type="text" id="text2" class="form-control" placeholder="Enter Value"></th>
<th style="width: 120px;">
<select class="form-control sell" name="argSelect">
<option value="Arg">Argument</option>
<option value="AND">AND</option>
<option value="OR">OR</option>
<option value="ONLY">ONLY</option>
</select>
</th>
<th style="width:92.56px;"></th>
</tr>
</tbody>
</table>
</div>

差不多是@Carsten Løvbo Andersen的回答，但这里有一些关于事件委托的额外信息:

这是向动态元素添加事件监听器的唯一好方法
它减少了页面上的事件处理程序的数量，从而提高了性能

如果我们已经在谈论性能:在使用jQuery的上下文中，避免在同一函数中对同一元素多次使用jQuery选择器。例如

function foo() {
$(this).closest("tr").prev()...
$(this).closest("tr").remove();
}

保存到像

这样的变量中

function foo() {
var item = $(this).closest("tr");
item.prev()...
item.remove();
}

这减少了jQuery解析dom的频率

相关内容

最新更新

热门标签：