CODEWITHSUNDEEP
jquery
Marcogomesr
Marcogomesr

Reputation: 2672

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

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>

Upvotes: 0

Views: 34

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

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>

Upvotes: 1

Related Questions