更改元素時，單擊事件不起作用

Question

我有這個<td class="foo">dada</td> ，當點擊它會觸發一個事件，它工作正常。
我有這個<select>標簽，當所選選項更改<td class="foo">的文本時也會更改但是當<td>更改時，該元素的click事件不會觸發這里的示例代碼

<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>

Answer 2

徹底改變

$('.foo).on('click',function(){
    window.open('url', '_blank');
});

對此

$('.foo').on('click',function(){
    window.open('url', '_blank');
});

因為foo之后有'失蹤'。 如果目標正在更改並在處理程序之后添加，則需要為父項提供處理程序（文檔是保證選項）。 因此，您需要為文檔提供處理程序，例如：

$(document).on('click', '.foo',function(){
  window.open('url', '_blank');
});

Answer 3

將您的腳本更改為：

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

Click事件不適用於動態生成的元素