jquery - 在表 jquery 中附加 tr 不能正常工作

Question

li当用户单击元素时，我想在表中添加具有动态值的新行。但是当用户单击它时突然在表中添加 2 行而不是 1。为什么？

这是我的 jQuery 代码：

$('.wpforms-field-payment-multiple ul li').click(function(){
    var price = $(this).find('input').data('amount');
    var parent = $(this).closest('.wpforms-field-payment-multiple');
    var titles = $('.wpforms-field-description',parent).html();
    $('#booking .right .price table tbody').append('<tr><td class="name">'+titles+'</td><td class="pr">'+price+'</td></tr>');
});

Answer 1

JS 对我来说看起来不错，但请检查您的 HTML。你可能有一个嵌套的 UL,LI 标签。

下面的例子。

$('.wpforms-field-payment-multiple ul li').click(function() {
  alert("click");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wpforms-field-payment-multiple">
  <ul>
    <li>
      One Alert
      <ul>
        <li>
          Two Alerts
        </li>
      </ul>
    </li>
  </ul>
</div>