json加载后切换li不起作用？答案

【问题标题】：Toggle li don't work after json load?json加载后切换li不起作用？
【发布时间】：2014-01-19 11:59:58
【问题描述】：

我试图建立一个色彩系统管理，但我是新手，这对我来说太难了！

我的问题是：

当我加载我的 html 页面时，一切正常，但是当我单击加载 json 的“li”元素时，我所有的切换元素都不起作用！！！奇怪，请问问题出在哪里？语法？

HTML 代码：

<div id="content">
    <div class="theme-item">
        <ul class="color-list one">
            <li>
                <span class="in"></span>
            </li>
</ul>
</div>


<ul class="elements-list">
    <li class="elements-item">
        <span class="tog">test one</span>
        <div class="togcont hidden">
            <h5 data-title="">text text</h5>
        </div>
    </li>
</ul>
</div>

查询代码：

$(document).ready(function() {
    // ----------------------
    // JSON INFOS
    // ----------------------   
  $(".color-list li").click(function(event){
    $.getJSON('result.json', function(jd) {
      $('ul.elements-list').html('<li class="elements-item"><span class="tog">' + jd.name + '</span><div class="togcont"><p>Name: ' + jd.name + '</p></div></li>');
      $('ul.elements-list').append('<li class="elements-item"><span class="tog">' + jd.age + '</span><div class="togcont hidden">Name: ' + jd.age + '</div></li>');
      $('ul.elements-list').append('<li class="elements-item"><span class="tog">' + jd.sex + '</span><div class="togcont hidden">Name: ' + jd.sex + '</div></li>');

    });
  });

    // ----------------------
    // TOGGLE BULLZ
    // ----------------------
    $(".tog").click(function(){
        var obj = $(this).next();
            if($(obj).hasClass("hidden")){
                $(obj).removeClass("hidden").slideDown();
                $(this).addClass("bounce");
            } else {
                $(obj).addClass("hidden").slideUp();
                $(this).removeClass("bounce");
        }
    });


});

CSS 代码（部分）：

ul.elements-list {
    list-style-position: inside;
    list-style-type: none;  
}

ul.elements-list li {
    margin: 20px 0;
    background-color:  #393939;
    border-radius: 16px;
    text-transform: uppercase;
    font-weight: 300;   
}

ul.elements-list li .tog {
    color: #FFF;
    cursor:pointer;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    cursor:pointer;
}

div.togcont {
    padding:15px 20px;
    overflow:hidden;
    margin-bottom:20px;
    display: none;
    text-transform: none;
    line-height: 1.8em;
    font-size: 1.0em;
    color: #CCC;
    text-shadow: 0 2px 0 rgba(0,0,0,0.3);
}

【问题讨论】：

标签： javascript jquery html css json

【解决方案1】：

尝试使用委托：

$(document).on('click', ".tog", function(){

由于在附加新元素之前附加了单击处理程序，因此您需要委托此单击处理程序以捕获事件。

查看.on()的文档

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。 - 这意味着“$(document).on(”是一张安全卡

【讨论】：

@GilbertOOl，很高兴我能帮上忙！

【解决方案2】：

试试.on()

$(document).on("click", ".tog", function(){

你需要event delegation

【讨论】：

@GilbertOOl 欢迎乐于助人 :)