javascript - jquery .last() 仅单击最后一个元素一次时触发多次

Question

我有一些带有单选按钮的选项卡，并且想要检查何时单击最后一个选项(我的意思是最后一个选项卡中的任何单选按钮，而不是最后一个单选按钮)。

这是我的 html:

<div id="smartwizard" class="sw-main sw-theme-default">
  <ul class="nav nav-tabs step-anchor">
    <li class="optietabs nav-item done">
      <a href="#step-0" class="nav-link">Lijmlaag
<button class="infotooltip" data-tooltip="lijmlaag is gewoon een dikke laag lijm">
<i class="fas fa-info-circle"></i></button></a>
      <div id="step-0" class="" style="display: none;">
        <form class="" id="step__form" method="post">
          <div class="tab-content2">
            <input type="radio" id="Wit-Lijmlaag" name="Lijmlaag" value="Wit(prijsberekening)($m2*4);">
            <label for="Wit-Lijmlaag">
              <div class="afwerking-tab">
                <img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Wit">
                <p><strong>Wit</strong></p>
              </div>
            </label>
            <input type="radio" id="Grijs-Lijmlaag" name="Lijmlaag" value="Grijs(prijsberekening)($stuksprijs+15);">
            <label for="Grijs-Lijmlaag">
              <div class="afwerking-tab">
                <img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Grijs">
                <p><strong>Grijs</strong></p>
              </div>
            </label>
          </div>
        </form>
      </div>
    </li>
    <li class="optietabs nav-item done">
      <a href="#step-1" class="nav-link">Laminaat
<button class="infotooltip" data-tooltip="Test test test test&nbsp;">
<i class="fas fa-info-circle"></i></button></a>
      <div id="step-1" class="" style="display: none;">
        <form class="" id="step__form" method="post">
          <div class="tab-content2">
            <input type="radio" id="Anti-slip laminaat-Laminaat" name="Laminaat" value="Anti-slip laminaat(prijsberekening)($o*5);">
            <label for="Anti-slip laminaat-Laminaat">
              <div class="afwerking-tab">
                <img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Anti-slip laminaat">
                <p><strong>Anti-slip laminaat</strong></p>
              </div>
            </label>
            <input type="radio" id="Glans laminaat-Laminaat" name="Laminaat" value="Glans laminaat(prijsberekening)($m2*4);">
            <label for="Glans laminaat-Laminaat">
              <div class="afwerking-tab">
                <img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Glans laminaat">
                <p><strong>Glans laminaat</strong></p>
              </div>
            </label>
            <input type="radio" id="Mat laminaat-Laminaat" name="Laminaat" value="Mat laminaat(prijsberekening)($m2*4);">
            <label for="Mat laminaat-Laminaat">
              <div class="afwerking-tab">
                <img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Mat laminaat">
                <p><strong>Mat laminaat</strong></p>
              </div>
            </label>
            <input type="radio" id="Geen-Laminaat" name="Laminaat" value="Geen">
            <label for="Geen-Laminaat">
              <div class="afwerking-tab">
                <img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Geen">
                <p><strong>Geen</strong></p>
              </div>
            </label>
          </div>
        </form>
      </div>
    </li>
    <li class="optietabs nav-item active">
      <a href="#step-2" class="nav-link">Afwerking</a>
      <div id="step-2" class="">
        <form class="" id="step__form" method="post">
          <div class="tab-content2">
            <input type="radio" id="Contoursnijden-Afwerking" name="Afwerking" value="Contoursnijden(prijsberekening)($m2*30);">
            <label for="Contoursnijden-Afwerking">
              <div class="afwerking-tab">
                <div class="ribbon ribbon-top-right">
                  <span>Meest gekozen</span>
                </div>
                <img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Contoursnijden">
                <p><strong>Contoursnijden</strong></p>
              </div>
            </label>
            <input type="radio" id="Schoonsnijden-Afwerking" name="Afwerking" value="Schoonsnijden">
            <label for="Schoonsnijden-Afwerking">
              <div class="afwerking-tab">
                <img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Schoonsnijden">
                <p><strong>Schoonsnijden</strong></p>
              </div>
            </label>
          </div>
        </form>
      </div>
    </li>
  </ul>
</div>

这是我的 jquery 函数:

$("#smartwizard input:radio").on("click", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
  var form_data = $("#formsid form").serialize();

  $('#formaataantaltab').removeClass('formaataantal-done');
  $('#formaataantaltab').addClass('formaataantal');

  $.ajax({
    type:'post',
    url:"catalog/calcdiv.php",
    data:({form_data: form_data}),
    success:function(data){

      var content = $( $.parseHTML(data) );
      $( "#ajaxresult" ).empty().append( content );
      $('#prijsonder').empty().append($('#prijs').html());
       // indicate the ajax has been done, release the next step
       $("#smartwizard").smartWizard("next");
    }
  });

  $laatsteopties = $(".optietabs").last();
  $($laatsteopties).on("change", function() {
    console.log('last option clicked');
  });

  $(".optietabs").each(function(){
    $(this).on("click", function() {
        $([document.documentElement, document.body]).animate({
            scrollTop: $(this).offset().top
        }, 0);
    })
  });
});

在控制台中单击最后一个选项时，此部分记录的位置:

  $laatsteopties = $(".optietabs").last();
  $($laatsteopties).on("change", function() {
    console.log('last option clicked');
  });

问题是，当我单击一个单选按钮时，我会看到控制台多次记录最后单击的选项，在本例中为 3 次，而不是每个单选按钮单击一次。

这是为什么呢？我做错了什么？

Answer 1

您在 block $("中添加了代码 $($laatsteopties).on("change", function() {... (1) #smartwizard input:radio").on("click", function(e,anchorObject,stepNumber,stepDirection,stepPosition){(2)，所以代码(1) 每个单选按钮执行三次。您需要移动代码

$laatsteopties = $(".optietabs").last();
  $($laatsteopties).on("change", function() {
    console.log('last option clicked');
  });

代码块外(2)。