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不工作？

回答

相關問題