jquery - jQuery 创建元素并使用它

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/，特别注意“直接和委托事件”部分。