使用jQuery

Question

我知道这看起来像一个基本问题。我一直在玩delegation，但仍然得到相同的结果。

我要使其起作用的是列表中的“删除”按钮，它仅适用于第一个按钮，但是如果我添加一个新按钮，它将不起作用

  //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>

Answer 1

为动态添加的元素绑定此类事件。

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