Question

点击功能有一个问题。我从jsfiddle.net创建了这个demo。

在此演示中，您可以看到有微笑按钮。单击这些按钮时，将在该时间打开一个选项卡。如果单击选项卡区域中的红色按钮，则选项卡不起作用，出现问题。

任何人都可以在这里帮助我，问题是什么，解决方案是什么？

该标签正常化，如此工作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

有updated and working version。

我们要做的是将目标移动到图标（几乎像标签和内容）的同一级别。而不是：

<div class="emoticon">
    <div class="emoticon_click" data-id="1">
        <img src="http://megaicons.net/static/img/icons_sizes/8/178/512/emoticons-wink-icon.png" width="30px" height="30px">
            <div class="user-container" data-upgraded></div>
    </div>

</div>

我们需要这个

<div class="emoticon">
    <div class="emoticon_click" data-id="1">
        <img src="http://megaicons.net/static/img/icons_sizes/8/178/512/emoticons-wink-icon.png" width="30px" height="30px">
            // not a child
            <!--<div class="user-container" data-upgraded></div>-->
    </div>
    // but sibling
    <div class="user-container" data-upgraded></div>    
</div>

如果这是新的HTML配置，我们可以更改处理程序

定位点击div "emoticon_click"
更改兄弟（非儿童）div＆＃34; user-container＆＃34;

旧代码 将被替换

$('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("");
});

现在将替换为：

//$('body').on('click', '.emoticon', function(e) {
$('body').on('click', '.emoticon_click', function(e) {
    // clear all user container at the begining of this click event
    $('body').find('.user-container').html("");

    // find id
    var id = $(this).attr('data-id');

    // find the parent, which also contains sibling
    // user-container
    var parent = $(this).parent()

    // let the target be initiated
    showProfileTooltip($(parent), id);
});

$(this).on( "click", function() {
    //$(this).find('.user-container').html("");
});

在action here

注意：真正有趣的注释是在Answer by pinturic

Answer 2

如果我们想要使用功能扩展the first and complete answer：

如果在标签或图标区域外单击
，请关闭所有标签

我们必须

添加一些事件，例如身体
并检查点击是否未打开＆＃34; .emoticon＆＃34;类元素

有a working example，包含此钩子：

$('body').on( "click", function(e) {
    // if clicked in the EMOTICON world... 
    var isParentEmotion = $(e.toElement).parents(".emoticon").length > 0 ;
    if(isParentEmotion){
        return; // get out
    }
    // else hide them
    $('body').find('.user-container').html("");
});

Answer 3

我一直在调试你的代码，结果就是这样：

您正在添加“标签”;任何时候你在该div中点击这段代码就会拦截它：

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

因此“标签”再次从头开始构建。

Jquery选项卡不起作用

3 个答案: