Использование jQuery для назначения нескольких классов

У меня есть этот код jQuery, где он может динамически добавлять и удалять форму выбора ввода.

$(document).ready(function() {
    var max_fields = 20; //maximum input boxes allowed

    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID
    var x = 1; //initlal text box count
    $(add_button).click(function(e) { //on add input button click
      e.preventDefault();
      if (x < max_fields) { //max input box allowed
        x++; //text box increment
        $( ".aaaa" ).first().clone().appendTo( ".input_fields_wrap" );
        }
    });
    $(wrapper).on("click", ".remove_field", function(e) {
      e.preventDefault();
      if($(".aaaa").length > 1) {
        $(this).parent('div').remove();
      } else {
        alert('You can not delete all elements');  
      }
    })
});

Я хочу использовать этот код jQuery для многих классов (class="input_field_wrap and etc.").

Единственное, что я могу видеть, чтобы заставить его работать, это сделать его как функцию onclick?

function createSelect(wrapper, add_button, a) {
 var max_fields = 20;
 var x = 1;
 $(add_button).click(function(e) { //on add input button click
      e.preventDefault();
      if (x < max_fields) { //max input box allowed
        x++; //text box increment
        $( ".aaaa" ).first().clone().appendTo( ".input_fields_wrap" );
        }
    });
}

Это не работает.

HTML:

 <div class="input_fields_wrap">
                      <a href="#" class="add_field_button" >Add Another Prescibed Medication</a>
                      <div class="aaaa">
                          Prescibed Medication Name:
                          <select class="form-control" name="prescription[]">
                              <option value="">Select an option</option>
                              <?php 

                            foreach($prescription->result() as $row)
                            { 
                              echo '<option value="'.$row->id.'">'.$row->name.'</option>';
                            }

                          ?>

                          </select>

                          <a href="#" class="remove_field">Remove</a>
                      </div>
                    </div>

1 ответ

  1. Вы просто должны использовать делегирование событий on()для работы с новым DOM, добавленным динамически, как и в предыдущем событии click for.remove_field, это будет :

    $('body').on('click', '.add_field_button', function(e) { 
      e.preventDefault();
    
      if (x < max_fields) { //max input box allowed
        x++; //text box increment
        $( ".aaaa" ).first().clone().appendTo( ".input_fields_wrap" );
        }
    });
    

    Надеюсь, это поможет.