Как построить функцию щелчка динамического идентификатора, которая зависит от переменной, сгенерированной в функции [jQuery]? - PullRequest
0 голосов
/ 08 июня 2018

Я пытаюсь создать функцию щелчка jQuery, которая использует динамический идентификатор и может быть применена к кнопке html, которая генерируется в функции щелчка, поэтому мне не нужно дублировать код без необходимости.К сожалению, кажется, что код работает только для первой итерации.Вот мой фрагмент кода:

var rowCount = parseFloat($('#sonstige_zahlungsströme tbody').length);
console.log(rowCount);

$('#zahlungsstrom_hinzufügen_' + rowCount).click(function() {
  var rowCountPlus = rowCount + 1
  var styleFormatCashFlowStartDate = '<input type="text" style="width: 200px; padding: 5px;" id=\"startdatum_' + rowCountPlus + '\" placeholder="Startdatum" onfocus="(this.type=\'date\')" onblur="(this.type=\'text\')">';
  var styleFormatCashFlowTargetDate = '<input type="text" style="width: 200px; padding: 5px;" id=\"enddatum_' + rowCountPlus + '\" placeholder="Enddatum" onfocus="(this.type=\'date\')" onblur="(this.type=\'text\')">';
  var styleFormatCashFlowPayment = '<input type="text" style="width: 200px; padding: 5px;" id=\"zahlung' + rowCountPlus + '\" placeholder="Zahlung [€/Monat]">';

  jQuery('#sonstiger_zahlungsstrom_' + rowCount).after('<tbody id=\"sonstiger_zahlungsstrom_' + rowCountPlus + '\"><td>' + styleFormatCashFlowStartDate + '</td><td>' + styleFormatCashFlowTargetDate + '</td><td>' + styleFormatCashFlowPayment + '</td><td><button id=\"zahlungsstrom_hinzufügen_' + rowCountPlus + '\">&#10010;</button></td><td><button id=\"zahlungsstrom_entfernen_' + rowCountPlus + '\">&times;</button></td></tbody>');

  //$('#zahlungsstrom_hinzufügen_'+rowCount).hide()

  rowCount = parseFloat($('#sonstige_zahlungsströme tbody').length);
  console.log(rowCount);
        <h4><b>Sonstige Zahlungsströme</b></h4>
        <table id="sonstige_zahlungsströme">
            <tbody id="sonstiger_zahlungsstrom_1">
                <td><input type="text" style= "width: 200px; padding: 5px;" id="startdatum_1" placeholder="Startdatum" onfocus="(this.type='date')" onblur="(this.type='text')"/></td>
                <td><input type="text" style= "width: 200px; padding: 5px;" id="enddatum_1" placeholder="Enddatum" onfocus="(this.type='date')" onblur="(this.type='text')"/></td>
                <td><input type="text" style= "width: 200px; padding: 5px;" id="zahlung_1" placeholder="Zahlung [€/Monat]"/></td>
                <td><button id="zahlungsstrom_hinzufügen_1">&#10010;</button></td>
            </tbody>
        </table>

Я объявил глобальную переменную (var rowCount) перед функцией, которая должна быть обновлена ​​в конце функции при ее выполнении.После первой итерации функция click добавляет немного html в таблицу, и переменная rowCount в конце функции корректно увеличивается на одну единицу.

Теперь, когда глобальная переменная должна была увеличиться на одну единицу, я ожидал, что функция щелчка будет срабатывать при нажатии на новую кнопку, которая была сгенерирована внутри функции и имеет тот же идентификатор, что и первая, за исключением rowCountпеременная увеличена на единицу.

Может кто-нибудь подсказать, что не так?Заранее спасибо!

1 Ответ

0 голосов
/ 08 июня 2018

Вы можете попробовать добавить:

onClick(myFunction(this));

, а затем создать функцию:

function myFunction(elem) {
   jQuery(...);
}

для меня, которая работала довольно хорошо.

...