javascript - 更改元素时单击事件不起作用

Question

我有这个<td class="foo">dada</td>单击时会触发一个事件，并且工作正常。
我有这个 <select>标记当所选选项更改 <td class="foo"> 中的文本时也改变了，但是当<td>已更改该元素的点击事件不会触发这里是示例代码

<select class="chuchu">
       <option value="1">1</option>
       <option value="2">2</option>
</select>

<table id="tbl">
<tbody>
  <tr>
   <td class="foo">dada</td>
  </tr>
</tbody>
</table>

这里是触发事件的脚本代码点击<td>

<script type="text/javascript">
$('.foo).on('click',function(){
    window.open('url', '_blank');
});
</script>

这是<select>中更改事件的脚本标签这个工作正常我只是添加这个作为选择标签的引用

$(".chuchu").on("change", function(){
var _val = $(this).val();

$.ajax({
url:"sort_date_attendance.php",
type: "POST",
data: {data:_val},
success:function(response){
  data = JSON.parse(response);
  $("#tbl tbody").html('');
  var html = '';
  for (var i=0; i< data.data.length; i++){
  html +='<tr>'+
            '<td class="foo">'+data.data2[i].stud_lastname+' '+data.data2[i].stud_firstname+'</td>'+                
        '</tr>';
      }
      $("#tbl tbody").html(html);
     }
   });
 });

</script>

Answer 1

你的 td 是动态的，尝试改变它，你在点击事件中错过了脚本中的单引号

<script type="text/javascript">
$('.foo).on('click',function(){
window.open('url', '_blank');
});
</script>

到:

<script type="text/javascript">
$(document).on('click', '.foo',function(){
window.open('url', '_blank');
});
</script>