每天学习一点点，每天进步一点点！

最新推荐文章于 2019-01-13 21:04:42 发布

最新推荐文章于 2019-01-13 21:04:42 发布 · 425 阅读

文章标签：

#JavaScript #ViewUI

事件绑定--on方法和bind 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了jQuery中bind()和on()两种事件绑定方法的区别与用法。bind()仅对当前元素有效，而on()则适用于当前及未来元素，包括动态新增的元素。文中通过实例展示了如何使用这两种方法来实现元素的添加和删除操作。

// bind 方法 
$('.course-popup-list .del-course').bind( 'click', function(){
       
    $(this).parents(".course-popup-list").remove();
    
 });

$('.course-popup-list .add-course').click(function(){
        
    $(".operate-cont").append( $('#myAppendTag').html() );

    $('.course-popup-list .del-course').unbind('click').bind( 'click', function()   {
       
    $(this).parents(".course-popup-list").remove();
        
    });
    
 });

// on 方法 
$('.operate-cont').on('click','.del-course',function(){
   $(this).parents(".course-popup-list").remove();
});

$('.course-popup-list .add-course').click(function(){
        
   $(".operate-cont").append( $('#myAppendTag').html() );
});

bind()方法向被选元素添加一个或者多个事件处理程序，以及当事件发生时运行的函数。

bind()方法只针对当前元素起作用，而对于未来元素（比如由脚本创建的新元素）就没有作用了

on()方法在被选元素及子元素上添加一个或者多个事件处理程序。

使用on（）方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off() 方法。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

on() 方法是向被选元素添加事件处理程序的首选方法。