Question

所以，我正在尝试使用jQuery，我做了这个（btw sati意味着几个小时）： 已更新

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

如您所见，我正在动态地向表单添加字段，并且效果很好。这是第二个给我带来问题的功能。那应该是在生成的表单span输入thingy中选择向上和向下按钮。你能告诉我我做错了什么吗？

Answer 1

ID必须是唯一的，这就是你的代码在第二行失败的原因。

改用类。

此外，您的click（）函数可能正在查找尚未创建的元素。请改用on()，它适用于动态添加的内容。

更新

所以我现在正在使用课程，但它仍然不起作用！ $("form#form1 > span[class^='hour'] > button").on("click",(function(){ alert("!"); }));

您需要修复on（）选择器：

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

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

2 个答案: