1

我正在使用 GAS HTML 服务和 jquery。

当鼠标悬停在表格的某一行时，我想显示一些编辑按钮。问题是jquery的悬停功能不起作用。

我尝试了几个元素，例如 tr，td，甚至 li，但没有成功。我不知道这是一个caja问题还是什么。

你可以帮帮我吗？

编辑我想我发现了问题：由于 caja 我无法将函数绑定到元素。我将绑定操作放在 ready 函数中，现在它运行良好。我不太了解这个机制，所以如果有人可以向我解释一下，我将非常感激。为什么文档准备功能不被认为是动态的？为什么该功能有效而其他功能无效？

这是HTML代码

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<style type="text/css">
<!--
.odd {background: #d3d3d3;}
-->
</style>

<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
google.script.run.withSuccessHandler(fillTabs).getAllTabsData();
}); 

$("tr").hover(
  function () {
   console.log("Mouse hover row");
    $(this).css("background","yellow");
  }, 
  function () {
  console.log("Mouse leaving row");
    $(this).css("background","");
  }
);

$( "li.fade" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
});
</script>

<div id="tabs">
</div>

<script>

function fillTabs(tabs) {
  var tabsDiv;//=$('#tabs');
  var table;
  var data;
  for (var i = 0; i < tabs.length; i++) {

    data=tabs[i].data;
    var tabName=tabs[i].name;
    tabsDiv=$('#'+tabName);
    table='<table>'

    for( var j=0; j<data.length; j++){
      table+='<tr>'
      for(var k=0; k<data[j].length;k++){
        table+='<td>'+data[j][k]+'</td>'
      }
      table+='</tr>'
    }
    table+='</table/>'

    tabsDiv.html(table);
  }
  $("tr:odd").addClass("odd");
  $("#tabs").tabs();
}
</script>
4

1 回答 1

1

尝试这个，

由于元素是动态生成的，因此您必须使用事件作为委托方法，即。$(document).on()并且不能hover用作委托方法，Hover 是 and 的组合mouseenter，mouseleave代码如下

$(document).on('mouseenter','tr',function()
{
console.log("Mouse hover row");
    $(this).css("background","yellow");
});
$(document).on('mouseleave','tr',function()
{
console.log("Mouse leaving row");
    $(this).css("background","");
});

编辑答案

$(document).ready()将在页面加载时首先加载，但是那时新生成的元素不存在，因此绑定事件将不起作用。因此，当使用委托方法时，它代表动态生成的元素。

希望这会有所帮助，谢谢

于 2013-11-01T13:11:40.673 回答