Question

例如，我有类似的东西：

<div id="buttons">
    <button class="button">Click</button>
</div>

<script>
    $(document).ready(function() {
        $('.button').click(function() {
            $('#buttons').append('<button class="button">Click</button>');
        });
    });
</script>

当我按下“点击”按钮时，脚本将创建一个具有相同类“按钮”的新按钮。当我按下这个新按钮时 - 没有任何反应。

我理解为什么，但我不知道如何避免这种情况。我希望我的脚本“看到”刚刚创建的按钮。

Answer 1

使用on绑定到委派的事件

$("#buttons").on("click", ".button", function () {
   $('#buttons').append('<button class="button">Click</button>');    
});

示例： http://jsfiddle.net/66H8W/

Answer 2

Hiya 演示：http://jsfiddle.net/vcrF3/ **或http://jsfiddle.net/vcrF3/1/

http://api.jquery.com/on/ 引用

events-map一个字符串键表示一个或多个的映射空格分隔的事件类型和可选的命名空间以及值表示要为事件调用的处理函数。

Jquery代码

   $.fn.ready(function() {
       $('div').on("click", ".button",  function() {
           $('#buttons').append('<button class="button">Click</button>');
          // alert('append button is clicked');
        });
    });

Answer 3

阅读http://api.jquery.com/on/，特别注意“直接和委派活动”部分。

jQuery创建元素并使用它

3 个答案: