jQuery选项卡不起作用

Question

I have one problem with click function. I have created this demo from jsfiddle.net.

In this demo you can see there are smile buttons. When you click those buttons then a tab will be opening on that time. If you click the red button from tab area then the tab is not working there are something went wrong.

Anyone can help me here what is the problem and what is the solution?

The tab is normalize like this working demo

var response = '<div class="icon_b">
            <div class="clickficon"></div>
                <div class="emicon-menu MaterialTabs">
                    <ul>
                        <li class="tab active"><a href="#starks-panel1"> TAB1</a></li>
                        <li class="tab"> <a href="#lannisters-panel1"> TAB2</a></li>
                        <li class="tab"> <a href="#targaryens-panel1"> TAB3</a><span></span></li>
                    </ul>
                    <div class="panels">
                        <div id="starks-panel1" class="panel pactive"> a </div> 
                        <div id="lannisters-panel1" class="panel"> b </div>
                        <div id="targaryens-panel1" class="panel"> c </div>
                    </div>
                </div>
            </div>';

$(document).ready(function () {

    function showProfileTooltip(e, id) {
        //send id & get info from get_profile.php 
        $.ajax({
            url: '/echo/html/',
            data: {
                html: response,
                delay: 0
            },
            method: 'post',
            success: function (returnHtml) { 
                e.find('.user-container').html(returnHtml).promise().done(function () {
                    $('.emoticon').addClass('eactive');
                });
            }
        });

    }
    $('body').on('click', '.emoticon', function(e) {
    var id = $(this).find('.emoticon_click').attr('data-id');
    showProfileTooltip($(this), id);
});
    $(this).on( "click", function() {
  $(this).find('.user-container').html("");
});
var componentHandler = function() {
  'use strict';

  var registeredComponents_ = [];
  var createdComponents_ = [];

  function findRegisteredClass_(name, opt_replace) {
    for (var i = 0; i < registeredComponents_.length; i++) {
      if (registeredComponents_[i].className === name) {
        if (opt_replace !== undefined) {
          registeredComponents_[i] = opt_replace;
        }
        return registeredComponents_[i];
      }
    }
    return false;
  }

  function upgradeDomInternal(jsClass, cssClass) {
    if (cssClass === undefined) {
      var registeredClass = findRegisteredClass_(jsClass);
      if (registeredClass) {
        cssClass = registeredClass.cssClass;
      }
    }

    var elements = document.querySelectorAll('.' + cssClass);
    for (var n = 0; n < elements.length; n++) {
      upgradeElementInternal(elements[n], jsClass);
    }
  }

  function upgradeElementInternal(element, jsClass) {
    if (element.getAttribute('data-upgraded') === null) {
      element.setAttribute('data-upgraded', '');
      var registeredClass = findRegisteredClass_(jsClass);
      if (registeredClass) {
        createdComponents_.push(new registeredClass.classConstructor(element));
      } else {
        createdComponents_.push(new window[jsClass](element));
      }
    }
  }

  function registerInternal(config) {
    var newConfig = {
      'classConstructor': config.constructor,
      'className': config.classAsString,
      'cssClass': config.cssClass
    };

    var found = findRegisteredClass_(config.classAsString, newConfig);

    if (!found) {
      registeredComponents_.push(newConfig);
    }

    upgradeDomInternal(config.classAsString);
  }

  return {
    upgradeDom: upgradeDomInternal,
    upgradeElement: upgradeElementInternal,
    register: registerInternal
  };
}();




function MaterialTabs(element) {
  'use strict';
  this.element_ = element;
  this.init();
}

MaterialTabs.prototype.Constant_ = {
  MEANING_OF_LIFE: '42',
  SPECIAL_WORD: 'HTML5',
  ACTIVE_CLASS: 'pactive'
};
MaterialTabs.prototype.CssClasses_ = {
  SHOW: 'materialShow',
  HIDE: 'materialHidden'
};

MaterialTabs.prototype.initTabs_ = function(e) {
  'use strict';
  this.tabs_   = this.element_.querySelectorAll('.tab');
  this.panels_ = this.element_.querySelectorAll('.panel');
  for (var i=0; i < this.tabs_.length; i++) {
    new MaterialTab(this.tabs_[i], this); 
  }
};

MaterialTabs.prototype.resetTabState_ = function() {
  for (var k=0; k < this.tabs_.length; k++) {
    this.tabs_[k].classList.remove('pactive');
  }  
};

MaterialTabs.prototype.resetPanelState_ = function() {
  for (var j=0; j < this.panels_.length; j++) {
    this.panels_[j].classList.remove('pactive');
  } 
};

function MaterialTab (tab, ctx) {  
  if (tab) {
    var link = tab.querySelector('a');

    link.addEventListener('click', function(e){
      e.preventDefault();
      var href = link.href.split('#')[1];
      var panel = document.querySelector('#' + href);
      ctx.resetTabState_();
      ctx.resetPanelState_();
      tab.classList.add('pactive');
      panel.classList.add('pactive');
    });   

  }
};


MaterialTabs.prototype.init = function() {
  if (this.element_) {
    this.initTabs_();
  }
}


window.addEventListener('load', function() {
  componentHandler.register({
    constructor: MaterialTabs,
    classAsString: 'MaterialTabs',
    cssClass: 'MaterialTabs'
  });
});
});

Answer 1

I have been debugging your code and this is the result:

you are adding the "tab" under ; any time you click within that div this code is intercepting it:

$('body').on('click', '.emoticon', function(e) {       
    var id = $(this).find('.emoticon_click').attr('data-id');
    showProfileTooltip($(this), id);
});

and thus the "tab" are built again from scratch.