jQuery加载后切换li不工作？

我试图建立一个颜色系统管理，但我是新手，这对我来说太难了！jQuery加载后切换li不工作？

我的问题是：

当我加载我的HTML页面，所有的工作很好，但是当我的“礼”元素上单击负载JSON，我所有的切换元件不工作！奇怪，请问问题在哪里？句法？

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>

jQuery代码：

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

来源

2014-01-19 GilbertOOl

尝试使用代表团：

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

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

检查.on()

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

来源

2014-01-19 12:01:18 Sergio

感谢塞尔吉奥;-) – GilbertOOl

@GilbertOOl，很高兴我能！帮帮我！ – Sergio

尝试.on()

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

你需要event delegation

来源

2014-01-19 12:01:44

谢谢@Tushar ;-) – GilbertOOl

@Gilbert001欢迎高兴帮助:) –

jQuery加载后切换li不工作？

回答

相关问题