Javascript Jquery选项卡不工作

我有一个点击功能的问题。我是从jsfiddle.net创建的

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

任何人都可以帮我这里有什么问题，有什么解决办法

选项卡是像这样正常工作的

var响应=”





A.
B
C
';
$（文档）.ready（函数（）{
函数ShowProfile工具提示（e，id）{
//从get_profile.php发送id和获取信息
$.ajax({
url:“/echo/html/”，
数据：{
答:，
延迟：0
},
方法：“post”，
成功：函数（返回HTML）{
e、 查找（'.user container'）.html（returnHtml）.promise（）.done（函数（）{
$（'.emoticon'）.addClass（'eactive'）；
});
}
});
}
$（'body'）。在（'click'，'emoticon'，函数（e）{
var id=$（this）.find（'.emoticon_click'）.attr（'data-id'）；
showProfileTooltip（$（此），id）；
});
$（此）。在（“单击”，函数（）上）{
$（this.find（'.user container'）.html（“”）；
});
var componentHandler=函数（）{
"严格使用",；
var registeredComponents_U9=[]；
var createdComponents_U8;=[]；
函数findRegisteredClass（名称，选项替换）{
对于（var i=0；i

我一直在调试您的代码，结果如下：

您正在下面添加“选项卡”；当您在该div内单击时，此代码将拦截该div：

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

因此，“标签”又从头开始构建了。

有

我们要做的是将目标移动到与图标相同的级别（几乎与选项卡和内容类似）。与此相反：

<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>

现在将替换为以下内容：

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

登记

注意：如果我们想通过一个功能进行扩展，真正有趣的注意点是：

如果在选项卡或图标区域之外单击，则关闭所有选项卡

我们必须

• 添加一些事件，例如添加到正文
• 并检查是否单击“.emoticon”类元素

包含此钩子的有：

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

---

这里什么不起作用，什么出了问题？不确定应该发生什么。@LakmalCaldera亲爱的，请检查演示并单击一个微笑图标，然后您将看到选项卡区域a

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

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