使用jQuery去给元素绑定事件时，无法给新创建的元素绑定事件的原因

在我们使用jQuery库去撰写js代码的时候经常会遇到这种问题，比如说给某个元素绑定点击事件，原本写在文档中的元素都可以响应该事件，比如下面我点击所有的div，去修改他们的颜色。

页面骨架如下：

<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </section>
    <button>点我</button>
</body>

展示效果如下：

此时我点击的第三个div那么它响应事件变成了红色

代码如下：

<script>
    $('div').click(function() {
        $(this).css('backgroundColor', 'red');

    })
</script>

此时我们在代码中创建一个div元素;

$('button').click(function() {
        var box = $("<div>num</div>");
        $('section').append(box);
    })

此时问题出现了，使用点击事件再次生成的div无法响应点击事件，为什么？

因为在我们的浏览器运行文件中的js代码时，它会通过jQuery的隐式迭代去给每一个元素绑定事件，而查找这些元素的根据就是写在选择器中的类名或者是id，在这个时候它会给现在在页面上的所有的符合条件的元素添加事件，注意，是现在在页面上的元素，而我们在页面加载完之后再通过js手动添加的页面元素则不会添加上这个事件，问题分析清楚了，那么如何解决呢？

这个时候就需要使用到on方法了，on方法用于为一个或一个系列的元素绑定事件，具体的语法如下：

$(selector).on(event,childSelector,data,function)

selector是绑定的元素，event是绑定的事件的类型，childSelector是可选项，代表需要被绑定事件的子元素，子选项，data是传输到函数外的数据，function是绑定在元素上的函数。

好的，那么现在方法介绍完了，要怎么实现新元素的绑定呢？

答案就在childSelector这个选项上，下面是代码：

$('section').on('click', 'div', function() {
        $(this).css('backgroundColor', 'red');

    });

此时，新创建的元素就可以响应到点击事件了，因为此时的事件实际上是绑定在section盒子上面的。而div是section的子元素，所以每当我们点击section元素里的div元素的时候，就会触发该事件，改变该div元素的颜色。这样每当我们点击的时候，浏览器就会先去运行绑定在父元素上的on方法来查找类名或id符合条件的元素再运行事件，这样就避免了在页面加载完毕之前进行事件的绑定，让页面加载完毕之后再使用js生成的元素也可以享受到事件。

大家可以看到新生成的numdiv也可以响应到事件，问题解决。

（ps:第一次写博客，有错误欢迎大家指出，感谢每一个阅读者）