jQuery Selector，用于以编程方式生成的内容的ID

Question

So, I am experimenting with jQuery and I made this (btw sati means hours): UPDATED

<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>

As you see I am dynamically adding fields to the form, and that works well. It is the second function that gives me problems. That should be selecting the up and down buttons in the generated form span input thingy. Could you tell me what am I doing wrong?

Answer 1

IDs have to be unique, that's why your code fails on the second row.

Use classes instead.

Also, your click() function might be looking for an element that's not created yet. Use on() instead, it works with dynamically added content.

---

UPDATE

So I am using classes now but it still doesn't work! $("form#form1 > span[class^='hour'] > button").on("click",(function(){ alert("!"); }));

You needed to fix your on() selector:

 $(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

I created a working fiddle for you.

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;
    });
});