jQuery id z dynamicznych formularzy

0

Witam
Robię stronę, na której są formularze dotyczące pracowników i ich pensji. Na początku są trzy formularze ale można zwiększyć do 20. Chciałbym, żeby imię i nazwisko wyświetliło się przed każdym formularzem, które są w klasach salary, bonus, sum. Teraz działa to tylko dla pierwszych trzech formularzy, które są widoczne na starcie.
Dla pozostałych (dodanych dynamicznie) poniższe zdarzenie się nie wykonuje tak jakby nie widział ich id. W jaki sposób zrobić tak, żeby działało to również dla formularzy dodanych z poziomu jQuery?

var employees = '#employee1, #employee2, #employee3';
		$(employees).change( function() {
			setName($('.'+this.id), this.value);
		});
 

Skrypt jQuery

 		var employees = '#employee1, #employee2, #employee3';
        function setName(empl, name) {
            for(var i = 0; i < empl.length; i++) {
                empl[i].textContent = name;
            }
        }
		
		$(employees).change( function() {
			setName($('.'+this.id), this.value);
		});
		
		
		var max				= 20;
		var empTab         = $("table.employee");
		var add_button      = $(".btn01");

		var numEmp = 3;
		$(add_button).click(function(e){
			e.preventDefault();
			if(numEmp < max){ 
				numEmp++; 
				$(empTab).not('.sum, .bonus, .salary').append('<tr><td>Pracownik '+numEmp+'</td><td><input type="text" id="employee'+numEmp+'"></td></tr>');
				$(empTab).filter('.sum, .bonus, .salary').append('<tr><td class="employee'+numEmp+'"></td><td><input type="number"></td></tr>');
				employees += ', #employee'+numEmp;
				alert(employees);
			} 
		});

Fragment HTML

     <div>
	<h1>Pracownicy</h1>
        <div>
            <table class="employee">
                <tr><td>Employee 1</td><td><input type="text" id="employee1"></td></tr>
                <tr><td>Employee 2</td><td><input type="text" id="employee2"></td></tr>
                <tr><td>Employee 3</td><td><input type="text" id="employee3"></td></tr>
            </table>
			<button class="btn01">Add employer</button>
    </div>
    <div>
	<h3>Pensja</h3>
        <div>
            <table class="employee salary">
                <tr><td class="employee1"></td><td><input type="number"></td></tr>
                <tr><td class="employee2"></td><td><input type="number"></td></tr>
                <tr><td class="employee3"></td><td><input type="number"></td></tr>
            </table>
        </div>
    </div>
    <div>
	<h3>Bonus</h3>
        <div>
            <table class="employee bonus">
                <tr><td class="employee1"></td><td><input type="number"></td></tr>
                <tr><td class="employee2"></td><td><input type="number"></td></tr>
                <tr><td class="employee3"></td><td><input type="number"></td></tr>
            </table>
        </div>
    </div>
	<div>
	<h3>Łącznie</h3>
        <div>
            <table class="employer sum">
                <tr><td class="employee1"></td><td><input type="number"></td></tr>
                <tr><td class="employee2"></td><td><input type="number"></td></tr>
                <tr><td class="employee3"></td><td><input type="number"></td></tr>
            </table>
        </div>
    </div>
2
  1. Jak korzystasz z jQuery, to wykorzystuj jego moc. Bo na razie to używasz teoretycznie jQuery, a praktycznie wszystko robisz ręcznie, np. tutaj:
   for(var i = 0; i < empl.length; i++) {
        empl[i].textContent = name;
  }
``

to by można zamienić na `empl.text(name);` i jQuery samo zamieni wszystkie teksty.

2. zamiast tworzyć ileś elementów i każdy o innym  `id` możesz utworzysz ileś elementów o tej samej klasie. W ten sposób będziesz mógł je wybrać jednym zapytaniem jQuery, np. `$(".employers")` i potem działać na wszystkich.

3. możesz przypisać zdarzenia do elementu `document` zamiast bezpośrednio do formularzy, np.:

```javascript
$(document).on('change', '.employee', function(e) {
// ....
});

w ten sposób zdarzenie jest łapane na wyższym poziomie i złapiesz to, nawet jak nowy element dojdzie (który jeszcze nie istnieje w danym momencie, więc nie możesz nasłuchiwać na nim zdarzenia).
https://jsfiddle.net/y6uaj240/1/
Także tutaj: http://api.jquery.com/on/

1 użytkowników online, w tym zalogowanych: 0, gości: 1