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

Question

我有一个完整的AJAX页面，其中的元素像按钮一样具有事件

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

被引用的元素是<li>和<tr> （在表中）。

如何附加事件处理程序以添加单击时selected的类？

Answer 1

您可以保留内联onclick事件，也可以使用jQuery在这些元素上添加其他click处理程序。 尝试这个

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

Answer 2

如果您的页面是通过AJAX加载的，则应将事件附加在live上 ，因此，如果要附加click事件，可以按以下方式进行：

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

更新

live（）方法在jQuery 1.7版中已弃用，在1.9版中已删除。 请改用on（）方法。

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

Answer 3

惯于

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

还工作吗？

还是您正在尝试将类添加到其他元素？

这是一个不同的元素。 如果由于load（）而加载了元素，请使用callback参数：

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

如果要在加载AJAX页面后立即选择元素，请使用以下命令：

$("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（）