克隆jquery按钮两次，并让它们都执行相同的任务

2 回答

• 0

  它最终比我想象的更复杂，你需要谨慎使用 $.clone() 甚至使用 true 作为参数，因为它可以复制事件而不应该 . （我的意思是，当你只需要一个事件时，它可以触发多个事件）

  我认为最简单的方法是创建一个类似下面的函数来将事件处理程序委托给新的克隆元素：

  function delegateNewPupilEvent (group) {
      group.find('#newPupil').click(function () {
          const clone = $(this).prev().clone();
  
          // clear inputs
          clone.find('input').val('');
          
          clone.insertBefore(this);
      });
  };
  
  $(function ($) {
      // creates the event for existing fields
      delegateNewPupilEvent( $('.newEvent') );
  
  
      $('#addEvent').click(function() {
          const newgroup = $('.newEvent').first().clone();
          
          // remove all but one participant field
          [...newgroup.find('.newParticipant')].slice(1).forEach(div => div.remove());
  
          // clear fields
          newgroup.find('input, select').val('');
  
          delegateNewPupilEvent(newgroup);
          newgroup.insertBefore(this);
      });
      
  });
  

  <form>
      <div class="newEvent">
          <fieldset id="ResultSheet">
              <legend>Add Event</legend>
              Event: <br>
              <select name="Events" id="Events">
                  <option disabled selected value> --SELECT AN OPTION BELOW-- </option>
                  <option value="100 Metres">100 Metres</option>
                  <option value="200 Metres">200 Metres</option>
              </select>
  
              <div class="newParticipant"><br>
                  First name:
                  <input type="text" name="fisrtName">
                  Last Name:
                  <input type="text" name="lastName">
              </div>
  
              <button type="button" id="newPupil" name="newPupil">
                   New participant
              </button>
          </fieldset>
      </div>
  </form>
  
  <input type="button" id="addEvent" name="addEvent" value="Add Event" />
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  

  回复于 2024-05-14T07:46:50+08:00
• 1

  属性id在文档中必须是唯一的，而是使用类 . 要附加动态创建的元素，请使用 on() .

  尝试以下方式：

  jQuery(function($){
    var $button1 = $('#addEvent'),
    $row1 = $('.newEvent').clone();
    $button1.click(function(){
      $row1.clone().insertBefore($button1);
    });
    
    var $row2 = $('.newParticipant').clone();
    $('body').on('click', '.newPupil', function(){
      $row2.clone().insertBefore(this);
    });
    
  });
  

  <div class="newEvent">
    <fieldset id="ResultSheet">
        <legend>Add Event</legend>
            Event: <br>
        <select name="Events" id="Events">
            <option disabled selected value> --SELECT AN OPTION BELOW-- </option>
            <option value="100 Metres">100 Metres</option>
            <option value="200 Metres">200 Metres</option>
            <option value="300 Metres">300 Metres</option>
            <option value="400 Metres">400 Metres</option>
            <option value="800 Metres">800 Metres</option>
            <option value="1500 Metres">1500 Metres</option>
            <option value="400 Metres">400 Metres</option>
            <option value="Hurdels">Hurdels</option>
            <option value="Shot Put">Shot Put</option>
            <option value="Discus">Discus</option>
            <option value="Javelin">Javelin</option>
            <option value="Long Jump">Long Jump</option>
            <option value="High Jump">High Jump</option>
            <option value="Triple Jump">Triple Jump</option>
            <option value="4x100 Metres Relay">4x100 Metres relay</option>
        </select>
  
        <div class="newParticipant"> 
            <br>
            First name: <input type="text" name="fisrtName">
            Last Name: <input type="text" name="lastName">
        </div>
        <input type="button" class="newPupil" name="newPupil" value="New participant"> 
    </fieldset>
  </div>
  <input type="button" id="addEvent" name="addEvent" value="Add Event" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <button value="Refresh Page" onClick="refreshPage()">REFRESH</button>
  <script src="newButtons.js"></script>
  

  回复于 2024-05-14T07:46:50+08:00