Question

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

这样的事件

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

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

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

Answer 1

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

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

Answer 2

如果您的网页是通过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 3

不会

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

也工作？

或者您是否尝试将该类添加到其他元素中？

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

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

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

4 个答案: