zoukankan      html  css  js  c++  java
  • js--未来元素

    通过动态生成的标签,在生成标签直接绑定事件是无效的。

    eg:html标签

    <div id="tree">
    </div>

     <script>

    $('#tree .items').on('click', function(e) {
      console.log(e);
      e.stopPropagation();
      if($(e.target).find('ul').is(':visible')) {
        $(e.target).find('ul').hide();
      } else {
        $(e.target).find('ul').show();
      }
      $(e.target).siblings().find('ul').hide();
    });

    function creatHtml(data) {
      var length = data.length;
      var htms = '<ul>'
      for(var i = 0; i < length; i++) {

        if(data[i].children && data[i].children.length > 0) {
          htms += '<li class="items" >' + data[i].name;
          htms += creatHtml(data[i].children);
        } else {
          htms += '<li>' + data[i].name;
        }
        htms += '</li>';
      }
      htms += '</ul>';
      return htms;
    }
    $('#tree').html(creatHtml(arr));
    $('.items').find('ul').hide();

    </script>

    以上的事件是没有效果的;

    可以通过两种方式改变:

    1.把click事件封装在一个方法里,在产生标签后调用。

     <script>

    function bindItems(){

      $('#tree .items').on('click', function(e) {
        console.log(e);
        e.stopPropagation();
        if($(e.target).find('ul').is(':visible')) {
          $(e.target).find('ul').hide();
        } else {
          $(e.target).find('ul').show();
        }
        $(e.target).siblings().find('ul').hide();
      });

    }

    function creatHtml(data) {
      var length = data.length;
      var htms = '<ul>'
      for(var i = 0; i < length; i++) {

        if(data[i].children && data[i].children.length > 0) {
          htms += '<li class="items" >' + data[i].name;
          htms += creatHtml(data[i].children);
        } else {
          htms += '<li>' + data[i].name;
        }
        htms += '</li>';
      }
      htms += '</ul>';
      return htms;
    }
    $('#tree').html(creatHtml(arr));

    //在生成标签的后面调用此方法。

    bindItems();

    $('.items').find('ul').hide();

    </script>

    2.on()

    //未来元素添加点击事件
    $('#tree').on('click', '.items', function(e) {
      e.stopPropagation();
      if($(e.target).find('ul').is(':visible')) {
        $(e.target).find('ul').hide();
      } else {
        $(e.target).find('ul').show();
      }

      $(e.target).siblings().find('ul').hide();
    });

  • 相关阅读:
    快速学习javaSE基础4---面向对象的编程
    eclipse 小技巧,设置输入任何字母都有快捷提示.
    快速学习javaSE基础3-java必须了解的基本语法2(熟记)
    快速学习javaSE基础3-java必须了解的基本语法1(熟记)
    数据可视化之导入数据
    pandas读取Excel文件
    pandas进阶
    给定地球上两点的经纬度,求两点之间沿地球表面最短的弧线距离
    06异常
    05设计模式
  • 原文地址:https://www.cnblogs.com/fangyinghua/p/9140176.html
Copyright © 2011-2022 走看看