Как включить динамически добавляемые входные значения внутри a .each() в Jquery

У меня есть система, где пользователь может создавать или редактировать игру, и иногда пользователю может потребоваться увеличить количество «максимальных игроков» в каждой игре. Когда экран изначально загружен, система предоставляет пользователю соответствующее количество входов, которое уже есть у игры. Таким образом, если в игре максимальное количество игроков равно 3, то будет отображаться 3 текстовых ввода.

Иногда пользователю может потребоваться увеличить «максимальное количество игроков» в игре, которая уже сохранена. Таким образом, если в оригинальной игре есть 3 максимальных игрока, и это затем увеличивается до 5 максимальных игроков, система автоматически добавит 2 новых текстовых ввода на экран.

Когда пользователь закончит, нажмите кнопку» Сохранить», и система будет искать каждый вход на основе его класса. Для приведенного ниже примера он ищет два класса, er-offpeak-2иer-peak-2, и он сгруппирует все классы er-offpeak-2вместе, и все er-peak-2классы вместе. Все найденные значения добавляются к строке, которая затем сохраняется в базе данных. На данный момент HTML выглядит так, когда отображаются исходные 3 входа:

<table>
    <tbody>
        <tr class="editrow-2 er-container" style="display:none;">
            <td><input type="text" value="3" id="er-maxplayer-2" class="maxplayerinput" data-gameid="2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="0">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="0">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="0">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="0">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="2">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="0">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
    </tbody>
</table>

И это мой HTML после того, как максимальное количество игроков увеличивается до 5:

<table>
    <tbody>
        <tr class="editrow-2 er-container" style="display:none;">
            <td><input type="text" value="5" id="er-maxplayer-2" class="maxplayerinput" data-gameid="2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="0">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="0">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="2">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="2">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="0">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="0">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="0">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="0">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-maxpinc="0">
            <td><input type="text" value="1.00" class="er-offpeak-2"/></td>
        </tr>
        <tr class="editrow-2 er-container" style="display:none;" data-minpinc="0">
            <td><input type="text" value="2.00" class="er-peak-2"/></td>
        </tr>
    </tbody>
</table>

Это код JQuery, который у меня есть, который ищет все эти классы, а затем группирует их вместе:

var offPeaks = '';
var peaks = '';

$('.er-offpeak-2').each(function(){
    if($(this).val() !== 'N/A') {
        var optionSelected = $(this).val()+'/';
        offPeaks += optionSelected;
    }
});

$('.er-peak-2').each(function(){
    if($(this).val() !== 'N/A') {
        var optionSelected = $(this).val()+'/';
        peaks += optionSelected;
    }
});

Моя проблема на данный момент заключается в том, что приведенный выше код JQuery только кажется способным видеть входные данные, которые были созданы, когда страница была загружена, и не включает входные данные, которые были добавлены динамически в таблицу.

Что можно сделать, чтобы включить динамически добавляемые входные данные?

1 ответ

  1. Добавьте идентификатор в таблицу. Например

    <table id="players">
    

    Чем в jQuery вызвать если что-нибудь изменится

    $("#players").change (function() {
      var offPeaks = '';
      var peaks = '';
    
      $('.er-offpeak-2').each(function(){
        if($(this).val() !== 'N/A') {
          var optionSelected = $(this).val()+'/';
          offPeaks += optionSelected;
        }
      });
    
      $('.er-peak-2').each(function(){
        if($(this).val() !== 'N/A') {
          var optionSelected = $(this).val()+'/';
          peaks += optionSelected;
        }
      });
    });