1

GAS HTML サービスと jquery を使用しています。

マウスがテーブルの特定の行にホバーしているときに、いくつかの編集ボタンを表示したいと考えています。問題は、jquery のホバー機能が動作していないことです。

tr、td、さらにはliなどのいくつかの要素を試しましたが、成功しませんでした。それがcajaの問題なのか、それとも何なのかわかりません。

私たちを手伝ってくれますか？

EDIT私は問題を見つけたと思います.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。ホバーは と の組み合わせです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 に答える