Event click is not working after been added in the DOM using jQuery

Question

I know it looks like a basic question. I've been playing around with delegation but still getting the same result.

What I'm trying to make it work the remove button on the list, it only works the first one but if I add a new one it won't work

  //variables
  let $questions = $('.quiz-questions');
  let $tableOptionQuestions = $('.survey-list-service');
  let $addNewOption = $('.add-option');
  let $removeOption = $('.remove-option');
  
  //events
  $addNewOption.on("click", addNewOptionFunc );
  $removeOption.on("click", removeOptionFunc );

  //add new option
  function addNewOptionFunc (e) {
    let $optionRow = $(this).prev().children('tbody').children('tr').first();
    $optionRow.clone().appendTo( "tbody" );
  }
  
  //remove option
  function removeOptionFunc (e) {
    let $optionRow = $(this);
    let $sizeRow = $tableOptionQuestions.find('tbody tr').length; 
    
    // if( $tableOptionQuestions.find('tbody tr').length != 1 ) {
      $optionRow.closest('tr').remove();
    // }    
    
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quiz-questions">

  
  <section>
  <table class="survey-list-service">
    <thead>
      <tr>
        <th>Name</th>       
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" value=""></td>
        <td><button class="button button-primary remove-option">remove</button></td>
      </tr>
    </tbody>
  </table>
  
  <button class="button button-primary add-option">Add </button>

  </section>

</div>

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — peeebeee, Jul 04 '18 at 09:29

score 1 · Accepted Answer · answered Jul 04 '18 at 09:32

Bind events like this for dynamically added elements.

$(document).on("click", '.add-option', addNewOptionFunc);
$(document).on("click", '.remove-option', removeOptionFunc);

//variables
let $questions = $('.quiz-questions');
let $tableOptionQuestions = $('.survey-list-service');

//events
$(document).on("click", '.add-option', addNewOptionFunc);
$(document).on("click", '.remove-option', removeOptionFunc);

//add new option
function addNewOptionFunc(e) {
  let $optionRow = $(this).prev().children('tbody').children('tr').first();
  $optionRow.clone().appendTo("tbody");
}

//remove option
function removeOptionFunc(e) {
  let $optionRow = $(this);
  let $sizeRow = $tableOptionQuestions.find('tbody tr').length;

  // if( $tableOptionQuestions.find('tbody tr').length != 1 ) {
  $optionRow.closest('tr').remove();
  // }    

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quiz-questions">


  <section>
    <table class="survey-list-service">
      <thead>
        <tr>
          <th>Name</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="text" value=""></td>
          <td><button class="button button-primary remove-option">remove</button></td>
        </tr>
      </tbody>
    </table>

    <button class="button button-primary add-option">Add </button>

  </section>

</div>

Event click is not working after been added in the DOM using jQuery

1 Answers1