JQuery селектор для идентификатора программно генерируемого содержимого

Question

Итак, я экспериментировал с JQuery, и я сделал это (кстати сати означает часы): ОБНОВЛЕНО

<script> 
$(document).ready(function(){ 
    window.sati = 1; 
    $("#addSat").click(function(){ 
     var sat = window.sati; 
     $('form#form1').append('<span class="hour' + sat + '"><span class="numHour">' + sat + '</span><input type="text" value="" name="subject"/><button type="button" class="down">&darr;</button><button type="button" class="up">&uarr;</button></span><br/>'); 
     window.sati+=1; 
    }); 
    $("form#form1 > span[class^='hour'] > button").on("click",(function(){ 
     alert("!"); 
    })); 
}); 
</script> 

Как вы видите, я динамически добавлять поля к формы, и это хорошо работает. Это вторая функция, которая дает мне проблемы. Это должно выбрать кнопки вверх и вниз в сгенерированном вводе формы. Не могли бы вы сказать мне, что я делаю неправильно?

Answer 1

Идентификаторы должны быть уникальными, поэтому ваш код выходит из строя во второй строке.

Используйте классы вместо этого.

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

---

UPDATE

Так я использую классы сейчас, но он по-прежнему не работает! $("form#form1 > span[class^='hour'] > button").on("click",(function(){ alert("!"); }));

Вам необходимо исправить на() селектор:

$(document).ready(function(){ 
 
    window.sati = 1; 
 
    $("#addSat").click(function(){ 
 
     var sat = window.sati; 
 
     $('form#form1').append('<span class="hour' + sat + '"><span class="numHour">' + sat + '</span><input type="text" value="" name="subject"/><button type="button" class="down">&darr;</button><button type="button" class="up">&uarr;</button></span><br/>'); 
 
     window.sati+=1; 
 
    }); 
 
    $("form#form1").on("click", "span[class^='hour'] > button",function(){ 
 
     alert("!"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form1"></form> 
 
<button id="addSat">Dodaj Sat</button>

Answer 2

я создал рабочую скрипку для вас.

http://jsfiddle.net/8dtauh8e/1/

$(document).ready(function(){ 
    window.sati = 1; 
    $("#addSat").click(function(){ 
     var sat = window.sati; 
     var item = $('<span class="hour' + sat + '"><span class="numHour">' + sat + '</span><input type="text" value="" name="subject"/><button type="button" class="down">&darr;</button><button type="button" class="up">&uarr;</button></span><br/>'); 

     $('form#form1').append(item); 

     item.find('button').on('click', function(){ 
     alert('here - ' + $(this).prop('class') + ' ' + sat); 
     }); 

     window.sati+=1; 
    }); 
});