JQuery 单击触发器首先不起作用<li>标签

Question

I have test-page.php with code like this:我有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>

and here is the button.php code这是button.php代码

<a class="btn btn-primary btnNext">click me</a>

the code working fine, the button function worked as expected.代码工作正常，按钮功能按预期工作。 the problem appear when I move the active class from the second <li> tag to the first <li> tag, the button is not working.当我将active类从第二个<li>标签移动到第一个<li>标签时出现问题，按钮不起作用。 I'm new in JQuery, could someone explain why is it happen?我是 JQuery 的新手，有人可以解释为什么会这样吗？

Edited已编辑

Here is the not working code, the button not trigger click event:这是不起作用的代码，按钮不会触发点击事件：

<!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>

Answer 1

The clickhandler for btnNext seems overly complex and can be simplified. btnNext 的点击处理btnNext似乎过于复杂，可以简化。 Since you already know the class of the button and this is the only button with that class, there is no reason to travel up and down the DOM.由于您已经知道按钮的类并且这是具有该类的唯一按钮，因此没有理由在 DOM 中上下移动。

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

JQuery 单击触发器首先不起作用<li>标签

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-09-11 19:08:07

JQuery 单击触发器首先不起作用<li>标签

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-09-11 19:08:07

解决方案1
2 已采纳 2020-09-11 19:08:07