append tr in table jquery not working correct

Question

I want to add new row in table with dynamic values when user click in li element. But when user click it suddenly add 2 rows in table not 1. Why?

This is my jQuery code:

$('.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>');
});

This shouldn't add 2 rows. Maybe you added the click handler twice? Is this code inside another event handler? — Barmar, Aug 29 '21 at 21:54
Please post a [mcve]. You can use a [Stack Snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) to make it executable. — Barmar, Aug 29 '21 at 21:55
Add console.log statements to see if the function is being called multiple times. — Barmar, Aug 30 '21 at 15:32
this my log: (index):1355 s.fn.init [li.choice-1.wpforms-image-choices-item, prevObject: s.fn.init(1)] (index):1355 s.fn.init [li.choice-1.wpforms-image-choices-item, prevObject: s.fn.init(1)] you can see two li element with same class and same line i n index — vahab, Aug 30 '21 at 15:38
What are you logging? I meant something like `console.log("Adding row")` — Barmar, Aug 30 '21 at 15:39
But it does look like it's being run multiple times. Is this event handler call inside another event handler? Every time the outer event happens, you'll add another inner handler. — Barmar, Aug 30 '21 at 15:41
if you can check this url: https://fixtman.com/demo-new-form/ and click on (book a service) in left-middle widow . after that click on (Tv Wall mounting) -> and then click one of the (tv size) . that you can see at the right of popup box that rows insert. — vahab, Aug 30 '21 at 15:45
I was right, this event handler is inside `$('#choose .ccontent .service').click(function()`. So every time you click on `.service`, the AJAX callback function adds another click handler to all the `.wpforms-field-payment-multiple ul li` elements. See https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements for the correct way to bind event handlers to dynamic elements. — Barmar, Aug 30 '21 at 15:56

score 0 · Answer 1 · answered Aug 29 '21 at 22:05

0

JS looks ok to me but check your HTML. You probably have a nested UL,LI tags.

Example below.

$('.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>

answered Aug 29 '21 at 22:05

Atif

10,623
20
63
96

I know what did you say. But when i checked inside li element isn't any ul tag. In fact inside li is label tag and inside label tag is input radio button that i use radio's value. – vahab Aug 30 '21 at 12:43

append tr in table jquery not working correct

1 Answers1