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


    });
    }

  • 相关阅读:
    Rust 总章
    GO 总章
    vue引入d3
    echarts地图修改高亮颜色及区域界线颜色
    vue+element 树形穿梭框组件
    element表格上下固定,内容高度自适应
    echarts在dialog弹框中不显示的解决方案
    echarts 饼图给外层加边框
    selenium等待元素出现
    Pycharm永久激活
  • 原文地址:https://www.cnblogs.com/mabelstyle/p/2880330.html
Copyright © 2011-2022 走看看