jquery动态绑定-jQuery实现动态添加元素绑定storm实例的解析

jQuery实现动态添加元素绑定storm实例的解析

更新时间：2018年9月07日 16:26:40 作者：H小智

本文主要介绍jQuery动态添加元素绑定storm的实现，结合实例分析常见的jQuerystorm绑定相关操作方法和注意事项，有需要的同学可以参考以下

本文介绍了jQuery实现动态添加元素的绑定风暴的示例。 分享给大家，供大家参考，如下：

在使用jquery绑定元素到元素时，我经常使用bind或clickjquery动态绑定，但这只能绑定页面上已经加载的元素。 例如，当需要以ajax的形式请求远程数据来动态添加页面元素时，显然上述绑定暴风雨的方法是无效的，具体写法如下。

$(selector).bind(event,data,function)

$(selector).click(function)

$("#searchMoveVideoResult ul li").bind("click",function(){
  $(this).css("border","5px solid #000");
});
$("#searchMoveVideoResult ul li").click(function(){
  $(this).css("border","5px solid #000");
});

动态添加元素的绑定风暴有多种形式：

1. delegate()：将一个或多个风暴处理程序附加到匹配元素的当前或未来子元素

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

现在大多数版本的 jquery 都可用jquery动态绑定，尽管我通常不使用它。

$("#searchMoveVideoResult").delegate("ul li","click",function(){
  $(this).css("border","5px solid #000");
});
$("#searchMoveVideoResult").delegate("click","ul li",function(){
  $(this).css("border","5px solid #000");
});

你能看出它们之间的区别吗？ 第二种写法是错误的。 记得把风暴写在元素前面。

2. live()：向当前或未来的匹配元素添加一个或多个风暴处理程序

$(selector).live(event,data,function)

jquery1.8版本中推荐了该技术； jquery1.8版本以后不建议使用，我尝试过，但是无效，所以jquery高版本建议使用on()方法绑定storm。

$("#searchMoveVideoResult ul li").live("click",function(){
   $(this).css("border","5px solid #000");
});

3. on()：适用于当前和未来的元素（比如脚本创建的新元素）

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

经过实验，大部分版本的jquery都支持这种技术，也是我比较喜欢使用的技术。

$("#searchMoveVideoResult").on("click","ul li",function(){
  $(this).css("border","5px solid #000");
});
//下面这样写就是错的了，一定要把动态添加的元素放到on()方法里面才行。
$("#searchMoveVideoResult ul li").on("click",function(){
  $(this).css("border","5px solid #000");
});

4.onclickstorm：动态添加数据时，将元素绑定到onclickstorm

function searchMoveVideo(){
  $.ajax({
    type:"POST",
    url:"http://op.juhe.cn/onebox/movie/video",
    data:{"q":$("#moveVideo").val(),"key":"346f79df993776748b242236464d565d"},
    dataType:"JSONP",
    success:function(data){
      console.log(data);
      if(data.error_code=="0"){
        var result=data.result;
        console.log(result);
        var html=result.title+"
"+result.tag+"
"+result.act+"
"+result.year+"
"                     +result.area+"
"+result.dir+"
"+result.desc;
        html+="

";
        html+='
';
        var act_s=result.act_s;
        for(var i=0;i<act_s.length;i++){
          html+='<li style="float: left;" onclick="showSource(this);">
'+act_s[i].name+'';
        }
        html+='
'
        $("#searchMoveVideoResult").html(html);
      }else{
        $("#searchMoveVideoResult").html(data.reason);
      }
    }
  });
}

对更多jQuery相关内容感兴趣的读者可以查看本站专题：《jQuery常用使用及方法总结》、《jQuery常用插件及使用方法总结》、《操作方法总结》 jQuery中的json数据》、《jQuery扩展技巧总结》、《jQuery常见经典特效总结》、《jQuery选择器使用总结》

希望这篇文章对您的 jQuery 编程有所帮助。