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();


    });
    }

  • 相关阅读:
    基于Typescript和Jest刷题环境搭建与使用
    一些惊艳到我的运维实施技巧和思路
    Zabbix 5.0:监控MySQL出现的问题
    Linux防火墙IPtables配置策略思路
    聊聊二维码
    如何创建SQLite数据库
    PLC工程师学会编程,是一种什么样的体验?
    让你的上位机程序独占鳌头
    使用delve调试golang
    指纹登录是怎么跑起来的
  • 原文地址:https://www.cnblogs.com/mabelstyle/p/2880330.html
Copyright © 2011-2022 走看看