jquery - 使用 jQuery 在 DOM 中添加事件后单击不起作用

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>

标签： jquery

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>