zoukankan      html  css  js  c++  java
  • jQuery delegate

    在我们用javascript动态添加某一类型的元素时,这些元素需要绑定某一事件,比如click事件,那么我们就需要用到delegate函数

    如果我们在每一次动态添加这种类型的元素的时候,都为该元素绑定某一事件的话,这样比较浪费。

    delegate函数就是让我们为某一类型的元素只绑定一次某一事件即可,即使未来有若干次的删除或添加,该事件都有效。

    delegate 的函数是被某一类型的共同父元素调用,

    listNode.delegate('.condition-remove','click',function(e){

    e.preventDefault();

    $(this).parents('.search-condition-item').remove();

    });

    完整实例(要实现的效果)

    function renderSearchConditions(selectionId,conditions){var conditionsTemplate = '<div class="search-conditions-list-section">'+

    '<ul class="search-conditions-list"></ul>'+
    '</div>',
    listNode = $(conditionsTemplate);
    listItemTemplate = '<li class="search-condition-item" data-type="{conditonType}"><span>{condition}</span><a class="condition-remove" href="#">x</a></li>';

    for(var key in conditions)

    {
    var condition = conditions[key].keyword,

    conditionType = conditions[key].type,
    listItemNode = $.substitute(listItemTemplate,{conditionType:conditionType,condition:condition});
    listNode.append(listItemNode);
    }
    $(selectionId).prepend(listNode);
    listNode.delegate('.condition-remove','click',function(e){
    e.preventDefault();
    $(this).parents('.search-condition-item').remove();


    });
    }

  • 相关阅读:
    正则表达式30分钟入门教程
    21 个HTML网页转RSS Feeds的工具
    批量去除PHP文件中bom的PHP代码
    WEB网页采集技术参考
    xcache
    Sonix SN9P701 OCR点读笔二维码识别源码
    UI设计素材资源网站推荐
    解决电信DNS劫持
    自学电子技术的最佳方法
    wp资源汇总
  • 原文地址:https://www.cnblogs.com/mabelstyle/p/2880330.html
Copyright © 2011-2022 走看看