Question

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

我的问题是：

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

HTML CODE：

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

jQUERY CODE：

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

Answer 1

尝试使用委托：

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

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

查看.on()

的文档

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

Answer 2

尝试.on()

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

您需要event delegation

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

2 个答案: