$().click()与 $(document).on('click','要选择的元素',function(){})

之前遇到过一次.click()无效，改成on绑定click就好了的情况，看了几篇博客后，发现是自己对click()和on的理解不够，没太在意，最近又遇到了，所以写下这篇博客加深印象。

$(选择器).click(fn)：当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。而.J_del这个删除按钮是通过append加到页面上的 。所以.click()无效

.$(document).on('click','要选择的元素',function(){})
　　  on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。即动态创建的元素也能触发事件 

另外这样写也不可以

因为通过on或click绑定的事件只对当前存在的元素有效， 即on前面的元素必须在页面加载的时候就已经存在dom里,所以后添加的类名为.del的按钮无效

可以像这样把事件绑定到.del的父元素上（事件委托），注意父元素必须是已经存在dom里，而不是后面动态添加的。

 $().on()的知识点补充：

 1.

$().on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过on()绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。

该函数属于jQuery对象(实例)。

 

2.

从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。
$().bind()直接绑定在元素上，和click，blur，mouseon一样的点击事件。
$().live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。
$().delegate()是更精确的小范围的使用事件代理。
$().on()结合了这三个方法的优势摒弃了劣势。

3.

该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

4. 阻止事件冒泡和事件委托的方法：
return false。 
在事件的处理中，可以阻止默认事件和冒泡事件。

event.preventDefault()
在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。

event.stopPropagation().。
在事件的处理中，可以阻止冒泡但是允许默认事件的发生。