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


    });
    }

  • 相关阅读:
    Solution: Win 10 和 Ubuntu 16.04 LTS双系统, Win 10 不能从grub启动
    在Ubuntu上如何往fcitx里添加输入法
    LaTeX 笔记---Q&A
    Hong Kong Regional Online Preliminary 2016 C. Classrooms
    Codeforces 711E ZS and The Birthday Paradox
    poj 2342 anniversary party
    poj 1088 滑雪
    poj 2479 maximum sum
    poj 2481 cows
    poj 2352 stars
  • 原文地址:https://www.cnblogs.com/mabelstyle/p/2880330.html
Copyright © 2011-2022 走看看