更改CSS

Question

=== UPDATE ===

如果我從模板中刪除the style="display: none;和下面推薦應用以下方法，當你點擊任何其他名單上的空集裝箱火災項目。還有什麼可以做的？

我有一個是在運行時動態使用jQuery和JSON（使用嵌入式HTML是一個模板）創建的UL列表。當用戶點擊列表項目（#navItem）時，我需要改變背景CSS樣式。我已經嘗試了月球下的所有內容，我可以從內聯類中想到.appentTo（）等。下面我對硬編碼元素的工作很好，但似乎沒有任何工作與動態加載的內容。更令人困惑的是，li標籤中的元素中的類啓動...？

任何幫助，將不勝感激。以下是我的代碼片段。日Thnx。

HTML：

<div id="navScrollContainer" class="navContentPosition"> 
    <ul id="navContent"> 
    // Display as 'None' to prevent a empty containter from showing --> 
     <li id="navItem" class="ulFx" style="display: none;">//<-THIS NEEDS TO CHANGE ONCLICK!! 
      <a class="navA"> 
      <h1 class="navH1">.</h1> 
      <h2 class="navH2">.</h2> 
      <p class="navP">.</p> 
      <hr class="navHR" /> 
     </li> 
    </ul> 
</div> 
<script type="text/javascript"> 
    $('#navScrollContainer').on('click', '.ulFx', function() { 
     $(this).addClass("liFx"); 
    }); 
</script> 

這是數據注入到DOM以列表的功能：

function loadNav(url, container, appendE) { 
    $.getJSON(url, function(data) { 

     $.each(data.items, function() { 
      var newItem = $('#' + container).clone(); 
      // Now fill in the fields with the data 
        newItem.addClass('ulFx'); 
      newItem.find("h1").text(this.label); 
      newItem.find("h2").text(this.title); 
      newItem.find("p").text(this.description); 
      newItem.find("a").attr("href", this.gotoURL); 
      newItem.children().appendTo('#' + appendE); 
     }); 

     $('#navHeaderTitle').text(data.listTitle); 
     iniScroll('scrollNav', 'navScrollContainer'); 
     var target = data.targetKey; 
     // transition("#" + pageName, "show"); 
    }); 
}; 

需要發生（只對項目）的CSS當用戶點擊一個項目：

@-webkit-keyframes 
liBG {from { 
    background-color: transparent 
} 
50% { background-color: rgba(51,102,255,0.15); } 
to { 
    background-color: transparent 
} 
} 

.liFx { 
    -webkit-animation-name: liBG; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-fill-mode: forwards; 
} 

給予利項目的類atributes：

.navH1 { 
    font-size: 18px; 
    color: #FFA500; 
    text-decoration: underline; 
    font-weight: bold; 
    margin-top: 8px; 
    margin-bottom: 8px; 
    margin-left: 15px; 
} 
.navH2 { 
    font-size: 16px; 
    color: #999999; 
    font-weight: bold; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    margin-left: 25px; 
    font-weight: bold; 
} 
.navP { 
    color: #888; 
    font-size: 14px; 
    text-align: justify; 
    margin-top: 5px; 
    margin-bottom: 16px; 
    margin-left: 25px; 
    margin-right: 10px; 
} 
.navA { 
    text-decoration: none; 
} 
.navHR { 
    border: none; 
    background-color: #336; 
    height: 1px; 
} 

Answer 1

我增加了一個DIV和addClass（）方法到我的功能Jeff B's answer above。如果該類被硬編碼到標籤中，它不起作用。

<ul id="navContent"> 
    <li id="navItem" style="display: none;"> 
     <div>//ADDED THIS TAG TO EXCEPT THE CLASS 
      <a> 
       <h1>.</h1> 
       <h2>.</h2> 
       <p>.</p> 
       <hr/> 
      </a> 
     </div> 
    </li> 
</ul> 

在我的js文件：

$.each(data.items, function() { 
    var newItem = $('#' + container).clone(); 
    // Now fill in the fields with the data 
    newItem.find("div").addClass("ulFx");//ADDED THIS METHOD 
    newItem.find("h1").text(this.label); 
    newItem.find("h2").text(this.title); 
    newItem.find("p").text(this.description); 
    newItem.find("a").attr("href", this.gotoURL); 
    newItem.children().appendTo('#' + appendE); 
}); 

Answer 2

這會留意動態元素：

$(".liFx").live("click", function() { 
    $(this).addClass("liBG"); 
}); 

Answer 3

沒有看到你的點擊處理程序，我只能猜測。但是，通常當問題與動態內容相關並讓他們響應刺激時，問題在於你如何附加處理程序。

如果您使用.click()或.trigger('click')，處理程序將直接應用於您要調用這些功能的元素。這意味着如果元素當前不存在，他們將不會收到處理程序。

來解決這個問題的方法，是將事件偵聽器附加到會永遠存在，然後看該事件從動態子元素向上傳播的父元素。您可以通過查看event.target來手動執行此操作，但像往常一樣，jQuery使我們更容易。

這樣做的jQuery的現代方法是使用.on()（documentation）：

$('#someparent').on('click', '#childselector', function() { 
    // my handler code 
}); 

jQuery的再附着上#someparent處理程序，當它看到是針對#childselector一點擊，它觸發。

如果你想一類適用於#navContent一個孩子，#navContent會一直存在，這樣做：

$('#navContent').on('click', 'li', function() { 
    $(this).addClass("liFx"); 
}); 

如果#navContent是動態的一樣，只是走在DOM樹高。請注意，li的ID爲navItem。這聽起來很像一個類，而不是一個ID。如果您要擁有多個navItem，則它們不能全部具有相同的ID。這就是類是什麼：

<li class="navItem liFx" style="display: none;"> 

Answer 4

我不知道問題出在哪裏，但你正在嘗試做的事情是這樣的：

$("#navlink").on('click', function() { 
    $("#yourselector").css("backgroundColor", "#ddd"); //change the color 
});