2017-08-15 76 views
0

为什么不动态添加标签时不返回对象?

所选的“tr”标签是通过点击事件动态添加的,但这不能通过其他点击事件返回任何东西。在动态添加的“tr”之上的所有原始静态“tr”标签可以通过相同的点击事件正常返回。

我真的搞不明白,在这里寻求帮助。

由于

//eventhandler to get current this<tr> object 
$('tr').click(function() { 
        console.log(this) 
} 
//original static <tr>, works fine 
<tr> 
        <td>Meet friends for dinner</td> 
        <td><time datetime="2013-10-14">2013-10-14</time></td> 
        <td>Personal</td> 
        <td> 
         <nav> 
          <a href="#">Edit</a> 
          <a href="#">Complete</a> 
          <a href="#">Delete</a> 
         </nav> 
        </td> 
</tr> 
//how I add <tr> dynamically 
<script id="taskRow" type="text/x-jQuery-tmpl"> 
<tr> 
    <td>${task}</td> 
    <td><time datetime="${requiredBy}">${requiredBy}</time></td> 
    <td>${category}</td> 
    <td> 
     <nav> 
      <a href='#'>Edit</a> 
      <a href='#'>Complete</a> 
      <a href='#' class='deleteRow'>Delete</a> 

     </nav> 
    </td> 
</tr> 
</script> 
+4

请显示您的代码,我们可以帮助您 – kinggs

+0

请参阅图片在这里输入图片描述 – hei

+4

@hei [代码图片不可接受](https://meta.stackoverflow.com/questions/285551/why - 未上传图像-的代码上那么当灰化-A-问题)。请直接复制粘贴代码到您的问题 – litelite

回答

0

的事件处理程序仅结合到当前选择的元素;它们必须存在于代码调用时的页面上.click()

因此,在代码生成之前,您的以下代码中必须存在tr

$('tr').click(function() { 
    console.log(this); 
} 

如果将新的HTML注入页面,最好使用委托事件来附加事件处理程序,如下所述。

委托事件的优点是它们可以处理后来添加到文档中的后代元素的事件。

$("table").on("click", "tr", function(event){ 
    console.log(this); 
}); 

看到这个fiddle欲了解更多信息。

注:委派的事件的方法(第二代码的例子)附加的事件处理程序仅一个元件,所述table,和事件只需要冒泡一个电平(从点击trtable)。

+0

嗨卡迈勒,你是对的,但我有另一个问题。 'tr'现在返回对象,当我点击时可以切换类,但CSS样式不适用于'class''rowHighlight'这些'tr'。谢谢! ('click','tr',function(evt){console.log($(this)) $(this).toggleClass('rowHighlight'); }) – hei

+0

看起来你错过了一个分号;在console.log之后。如果没有,请在[jsfiddle](https://jsfiddle.net/)中显示您的代码。 –

相关问题