Нажатие триггера не работает на вкладках bootstrap 4

Question

Я использую bootstrap 4 вкладки в качестве страниц, есть проблема, потому что я хочу отображать содержимое вкладок / страниц на body click, но когда я использую body click, то щелчок триггера не работает на prev and next buttons в противном случае он работает нормально, как я могу это исправить?

Мой код: -

$('.pageStepsTabs').hide();

/* customPageSteps begin here */
    $('#customPageStepBtns').on('click', '.btnNext', function () {
        $('.pageStepsTabs li > .active').parent('li').next('li').find('a').trigger('click');
        $('.mobile-page-menu-list').hide();
    });
    $('#customPageStepBtns').on('click', '.btnPrev', function () {
        $('.pageStepsTabs li > .active').parent('li').prev('li').find('a').trigger('click');
        $('.mobile-page-menu-list').hide();
    });
    /* customPageSteps ends here */
    
    /* dynamicPages begin here */
    var allPages =`
  <div class="tab-pane active" id="page1">page 1</div>
  <div class="tab-pane fade" id="page2">page 2</div>
  <div class="tab-pane fade" id="page3">page 3</div>
    `
    $('body').on('click', function () {
    $('#dynamicPages').html(allPages)
    });
    /* dybamicPages ends here */

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
  

<ul class="nav nav-tabs pageStepsTabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#page1">page 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#page2">page 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#page3">page 3</a>
  </li>
</ul>

<div id="dynamicPages" class="tab-content">
</div>






 <!-- page buttons -->
      <div id="customPageStepBtns">
        <div class="row m-0 mt-4 mb-4">
            <div class="col-md-12">
                <div class="float-left">
                    <button type="button" class="btn btn-primary btn-sm btnPrev"><i class="fa fa-chevron-left"></i> Prev</button>
                </div>
                <div class="float-right">
                    <button type="button" class="btn btn-primary btn-sm btnNext">Next <i class="fa fa-chevron-right"></i></button>
                </div>
            </div>
        </div>
    </div>

Answer 1

Добавить e.stopPropagation(); на кнопку следующего и предыдущего щелчка. Это предотвратит распространение функции щелчка к телу. Проверьте фрагмент

$('.pageStepsTabs').hide();

/* customPageSteps begin here */
$('#customPageStepBtns').on('click', '.btnNext', function(e) {
  e.stopPropagation();
  $('.pageStepsTabs li > .active').parent('li').next('li').find('a').trigger('click');
  $('.mobile-page-menu-list').hide();
});
$('#customPageStepBtns').on('click', '.btnPrev', function(e) {
  e.stopPropagation();
  $('.pageStepsTabs li > .active').parent('li').prev('li').find('a').trigger('click');
  $('.mobile-page-menu-list').hide();
});
/* customPageSteps ends here */

/* dynamicPages begin here */
var allPages = `
  <div class="tab-pane active" id="page1">page 1</div>
  <div class="tab-pane fade" id="page2">page 2</div>
  <div class="tab-pane fade" id="page3">page 3</div>
    `
$('body').on('click', function() {
  $('#dynamicPages').html(allPages)
});
/* dybamicPages ends here */

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>


<ul class="nav nav-tabs pageStepsTabs">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#page1">page 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#page2">page 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#page3">page 3</a>
    </li>
</ul>

<div id="dynamicPages" class="tab-content">
</div>
<!-- page buttons -->
<div id="customPageStepBtns">
    <div class="row m-0 mt-4 mb-4">
        <div class="col-md-12">
            <div class="float-left">
                <button type="button" class="btn btn-primary btn-sm btnPrev"><i class="fa fa-chevron-left"></i>
                    Prev</button>
            </div>
            <div class="float-right">
                <button type="button" class="btn btn-primary btn-sm btnNext">Next <i
                        class="fa fa-chevron-right"></i></button>
            </div>
        </div>
    </div>
</div>