我有测试页面.php，代码如下：
<!DOCTYPE html>
<html>
<head>
<!-- load bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".isi").load('button.php');
$(".but1").click(function(){
$("<button class='but btnNext'>before</button>").insertAfter(".but1");
});
$(".but2").click(function(){
$("<a class='btn btn-primary text-white btnNext'>after</a>").insertAfter(".home");
$("<a class='btn btn-primary text-white btnPrev'>before</a>").insertBefore(".home");
});
$(".but3").click(function(){
$("<button class='but btnPrev'>after</button>").insertAfter(".but3");
});
$('body').on('click', '.btnNext', function(){
$('.nav-kues .active').parent().next('li').find('.but3').trigger('click');
});
});
</script>
</head>
<body>
<div class="home" style="background-color:yellow">
<p>This is a paragraph.</p>
<div class="isi"></div>
<div class="content">
<p>Im Paragraph.</p>
<ul class="nav-kues">
<li><a class="but1">add before</a></li>
<li><a class="but2 active">add both</a></li>
<li><a class="but3">add after</a></li>
</ul>
</div>
</div>
</body>
</html>
这是按钮.php代码
<a class="btn btn-primary btnNext">click me</a>
代码运行良好，按钮功能按预期运行。当我将active类从第二个<li>标签移动到第一个<li>标签时，问题出现了，按钮不工作。我是JQuery的新手，有人能解释一下为什么会这样吗？
已编辑
以下是不工作的代码，按钮未触发点击事件：
<!DOCTYPE html>
<html>
<head>
<!-- load bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".isi").load('button.php');
$(".but1").click(function(){
$("<button class='but btnNext'>before</button>").insertAfter(".but1");
});
$(".but2").click(function(){
$("<a class='btn btn-primary text-white btnNext'>after</a>").insertAfter(".home");
$("<a class='btn btn-primary text-white btnPrev'>before</a>").insertBefore(".home");
});
$(".but3").click(function(){
$("<button class='but btnPrev'>after</button>").insertAfter(".but3");
});
$('body').on('click', '.btnNext', function(){
$('.nav-kues .active').parent().next('li').find('.but3').trigger('click');
});
});
</script>
</head>
<body>
<div class="home" style="background-color:yellow">
<p>This is a paragraph.</p>
<div class="isi"></div>
<div class="content">
<p>Im Paragraph.</p>
<ul class="nav-kues">
<li><a class="but1 active">add before</a></li>
<li><a class="but2">add both</a></li>
<li><a class="but3">add after</a></li>
</ul>
</div>
</div>
</body>
</html>
btnNext的点击处理程序似乎过于复杂，可以简化。由于您已经知道按钮的类，并且这是唯一具有该类的按钮，因此没有理由在DOM中来回移动。
$('body').on('click', '.btnNext', function(){
$('.nav-kues .active').parent().next('li').find('a').trigger('click');
});