每当用户选择表格行中的复选框并单击“保存”时，它将生成一个容器，该容器将以所选行的特定格式保存数据。
注意：数据来自JSON。
同样，用户还可以选择通过表单手动将数据添加到同一容器中。
现在，我将所有这些容器或数据持有者附加到dom中的父容器中。
我需要交换这些数据容器，这是迄今为止我已经实现的。 但是，第一个容器和最后一个容器的按钮不会被禁用或隐藏。
这是我的剧本
<script>
function getData(){
$('input[name="articles"]:checked').map(function() {
var content = JSON.parse(decodeURIComponent(this.value));
content+= '<div class="container parent><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Name:</label><div class="col-md-8 article-data">'+name+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove">Delete <span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';
$('.box').html(content);
});
$('.remove').click(function(){
$(this).parents('.parent').remove();
});
resetEvents();
}
function addName(){
var name= $("#articleTitle").val();
content +='<div class="container parent><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Name:</label><div class="col-md-8 article-data">'+Count+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove">Delete <span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';
$('.box').html(content);
$('.removeArticle').click(function(){
$(this).parents('.parent').remove();
});
}
function handleEvents() {
$(".top-btn, .down-btn").prop("disabled", false).show();
$(".parent:first").find(".top-btn").prop("disabled", true).hide();
$(".parent:last").find(".down-btn").prop("disabled", true).hide();
}
function resetEvents() {
$(".top-btn, .down-btn").unbind('click');
handleEvents();
$('.down-btn').click(function() {
var toMove1 = $(this).parents('.article-box');
$(toMove1).insertAfter($(toMove1).next());
handleEvents();
});
$('.top-btn').click(function() {
var toMove1 = $(this).parents('.article-box');
$(toMove1).insertBefore($(toMove1).prev());
handleEvents();
});
}
</script>
第一个数据持有者不会有一个顶级的交换。因此，应禁用或隐藏顶部按钮。
同样，最后一个数据持有者也没有可以交换的数据持有者。因此，应禁用或隐藏向下按钮。
我无法理解我写的内容有什么问题？
注意：如果我使用硬编码数据持有者而不是在运行时生成它，那么这种方法非常好。
答案 0 :(得分：1)
对于动态生成的元素，请使用如下的委托事件处理程序：
$("body").on("click", selector, function() {
//actions to do
});
答案 1 :(得分：1)
您需要添加delegated listener。
$('NearestParentElementThatAppearsOnPageLoad').on('event', 'ElementToApplyListenerTo', function() {
// Do something
});
答案 2 :(得分：0)
这是完整的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<style>
.parent {
height: 25%;
width: 90%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
}
.parent:nth-child(odd){
background: skyblue;
}
.parent:nth-child(even){
background: green;
}
.disabled-btn {
cursor: not-allowed;
opacity: 0.25%;
}
</style>
</head>
<body>
<button class="btn btn-primary" onclick="getData()">Get data</button>
<form>
<label>Count: </label>
<input type="text" placeholder="enter a count" id="mycount">
<button onclick="saveData()">Submit</button>
</form>
<div class="box">
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var content = "";
function getData(){
for(var count=0; count<4; count++){
content+= '<div class="container parent"><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Count:</label><div class="col-md-8 article-data">'+count+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove-btn">Delete <span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';
}
$('.box').html(content);
$('.remove-btn').click(function(){
$(this).parents('.parent').remove();
});
resetEvents();
}
function saveData(){
var count = $("#mycount").val();
content+= '<div class="container parent"><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Count:</label><div class="col-md-8 article-data">'+count+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove-btn">Delete <span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';
$('.box').html(content);
$('.remove-btn').click(function(){
$(this).parents('.parent').remove();
});
}
function handleEvents() {
$(".top-btn, .down-btn").prop("disabled", false).show();
$(".parent:first").find('.top-btn').attr('disabled','disabled');
$(".parent:first").find(".top-btn").prop("disabled", true).hide();
$(".parent:last").find(".down-btn").prop("disabled", true).hide();
}
function resetEvents() {
$(".top-btn, .down-btn").unbind('click');
handleEvents();
$('.down-btn').click(function() {
var toMove1 = $(this).parents('.parent');
$(toMove1).insertAfter($(toMove1).next());
handleEvents();
});
$('.top-btn').click(function() {
var toMove1 = $(this).parents('.parent');
$(toMove1).insertBefore($(toMove1).prev());
handleEvents();
});
}
</script>
</body>
</html>
resetEvents();
}
function saveData(){
var count = $("#mycount").val();
content+= '<div class="container parent><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Count:</label><div class="col-md-8 article-data">'+count+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove-btn">Delete <span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';
$('.box').html(content);
$('.remove-btn').click(function(){
$(this).parents('.parent').remove();
});
}
function handleEvents() {
$(".top-btn, .down-btn").prop("disabled", false).show();
$(".parent:first").find('.top-btn').attr('disabled','disabled');
$(".parent:first").find(".top-btn").prop("disabled", true).hide();
$(".parent:last").find(".down-btn").prop("disabled", true).hide();
}
function resetEvents() {
$(".top-btn, .down-btn").unbind('click');
handleEvents();
$('.down-btn').click(function() {
var toMove1 = $(this).parents('.parent');
$(toMove1).insertAfter($(toMove1).next());
handleEvents();
});
$('.top-btn').click(function() {
var toMove1 = $(this).parents('.parent');
$(toMove1).insertBefore($(toMove1).prev());
handleEvents();
});
}
</script>
</body>
</html>