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

因为有＆＃39; 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 event doesn't work on dynamically generated elements

更改元素时点击事件无效

3 个答案: