Javascript JQuery单击触发器不在第一个上工作<；李>；标签_Javascript_Html_Jquery

Javascript JQuery单击触发器不在第一个上工作<；李>；标签

javascript html jquery

Javascript JQuery单击触发器不在第一个上工作<；李>；标签,javascript,html,jquery,Javascript,Html,Jquery,我有test page.php，代码如下： <!DOCTYPE html> <html> <head>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script sr

我有test page.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>

btnNext

的clickhandler似乎过于复杂，可以简化。因为您已经知道按钮的类，并且这是该类中唯一的按钮，所以没有理由在DOM中上下移动

  $('body').on('click', '.btnNext', function(){
        $('.nav-kues .active').parent().next('li').find('a').trigger('click');
  });

btnNext

的clickhandler似乎过于复杂，可以简化。因为您已经知道按钮的类，并且这是该类中唯一的按钮，所以没有理由在DOM中上下移动

  $('body').on('click', '.btnNext', function(){
        $('.nav-kues .active').parent().next('li').find('a').trigger('click');
  });

我编辑了我的帖子并提供了无效代码，活动类在第一个

标签上，按钮不起作用。我编辑了我的帖子并提供了无效代码，活动类在第一个

标签上，按钮不起作用。实际上，代码更复杂，我只是简化了我的代码，真正的代码是某种导航栏，我需要某种“下一步”按钮来触发活动类中下一个标记的点击事件，@marahman，我更新了我的答案，只需将

。但是3

更改为

谢谢，我刚刚接受了这个作为我问题的答案。我真正的问题是按钮不起作用，这是因为我加载了2种JQuery库（v3.5.1和v3.2.1），非常感谢第一个评论帖子的人，在我更新问题后，评论被删除了，我忘记了那个人的用户名。实际上，代码更复杂，我只是简化了我的代码，真正的代码是某种导航栏，我需要某种“下一步”按钮来触发活动类中下一个标记的点击事件，@marahman，我更新了我的答案，只需将

。但是3

更改为

谢谢，我刚刚接受了这个作为我问题的答案。我真正的问题是按钮不起作用，这是因为我加载了两种JQuery库（v3.5.1和v3.2.1），非常感谢第一个评论这篇文章的人，一旦我更新了问题，评论就被删除了，我忘记了那个人的用户名。

  $('body').on('click', '.btnNext', function(){
        $('.nav-kues .active').parent().next('li').find('a').trigger('click');
  });