如何使用JavaScript附加class onClick事件？

Question

我有行爲像按鈕 與活動，如

onclick="$('#workcont').load('pages/mypage.html #m3-to-12');" 

被引用的元素是<li>和<tr>（在表）元素全AJAX頁面。

如何添加事件處理程序以在點擊時添加類selected？

Answer 1

如果你的頁面是通過AJAX加載，你應該附上您的活動與live，因此，如果您要附加一個點擊事件，你可以這樣來做：

$("li, tr").live('click', function() { 
    $(this).addClass("selected"); 
}); 

更新

live（）方法在jQuery 1.7版中被棄用，並且在版本1.9中被刪除。使用on（）方法。

$("li, tr").on("click",function(){ 
    $(this).addClass("selected"); 
}); 

Answer 2

您可以保留內聯onclick事件，也可以使用jQuery在這些元素上添加其他click處理程序。試試這個

$("li tr").click(function(){ 
    $(this).addClass("selected"); 
}); 

Answer 3

會不會

$('#workcont').load('pages/mypage.html #m3-to-12').addClass('selected'); 

工作也？

或者你是否試圖將該類添加到不同的元素？

它是一個不同的元素。如果元素被加載，因爲負載（）使用回調參數：如果你想盡快被點擊使用此選擇的元素

$('#workcont').load('pages/mypage.html #m3-to-12', function() { $('li').addClass('selected'); }); 

Answer 4

：

$("li, tr").click(function() { 
      $("li, tr").removeClass("selected");//To Remove any previuosly selected elements 
      $('#workcont').load('pages/mypage.html #m3-to-12'); 
      $(this).addClass("selected");// Select the clicked element 
     }); 

如果你想

$("li, tr").click(function() { 
      $("li, tr").removeClass("selected");//To Remove any previuosly selected elements 
      $(this).addClass("some_temp_unique_class_name"); 
      $('#workcont').load('pages/mypage.html #m3-to-12', function(response, status, xhr) { 
       if (status == "success") { 
       var elem = $("li.some_temp_unique_class_name,tr.some_temp_unique_class_name"); 
       elem.removeClass("some_temp_unique_class_name").addClass("selected");// Select the clicked element 
       } 
      }); 
     }); 

參考.load()瞭解更多詳情

：該元素將盡快AJAX頁面加載使用此選擇10