0

私はインターネットでたくさん検索しましたが、問題の解決策が見つかりませんでした。

私は AJAX、PHP、および Datatables を使用しています。プルアップはうまく機能します。データテーブルにレコードを表示できました。

私がやりたいのは、マウスが各行の上にあるときに「点灯」し、マウスを削除して通常に戻すことです。

私が見つけた限り、私に起こっていることは、イベントが行を検出しないということです。つまり、私が使用するコードは次のとおりです...

    $("#tabla  tbody  tr").each(function(){ 

            $(this).mouseover(function(){                       
               $(this).addClass("ui-state-hover");

              }).mouseout(function(){
                   $(this).removeClass("ui-state-hover");       
               });
    });

HTML コード:

         <table id="tabla">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Titulo</th>
                    <th>Subtitulo</th>
                    <th>Fecha</th>
                    <th>Acceder</th>
                </tr> 
            </thead>
            <tbody>
            </tbody>
       </table>

ページに手動で行を追加すると、マウスオーバーで動作します 例:

       <table id="tabla">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Titulo</th>
                    <th>Subtitulo</th>
                    <th>Fecha</th>
                    <th>Acceder</th>
                </tr> 
            </thead>
            <tbody>
                <tr >
                    <td>4</td>
                    <td>Titulo</td>
                    <td>Subtitulo</td>
                    <td>2013-09-11 00:00:00</td>
                    <td>4</td>
                </tr> 
            </tbody>
       </table>

問題は、AJAX関数を介して行が挿入されたときに機能しないことです。

AJAX コード:

$.ajax({

       url:'./listahistorias_proceso.php',
       type:'post',
       data:{ tag: 'getData'},
       dataType: 'json',
       success: function(data){
                if(data.success){
                    $.each(data, function(index,record){
                        if($.isNumeric(index)){
                            var row = $("<tr />");
                            $("<td />").text(record.idhistoria).appendTo(row);
                            $("<td />").text(record.titulo).appendTo(row);
                            $("<td />").text(record.subtitulo).appendTo(row);
                            $("<td />").text(record.fecha).appendTo(row);
                            $("<td />").text(record.acceder).appendTo(row);                             
                            $("<tr>");
                            row.appendTo('table tbody');
                        }
                     })
                }

                oTable = $('table').dataTable({
                        "bjQueryUI": true,
                        "sPaginationType": "full_numbers",
                        "oLanguage": {
                                    "sLengthMenu": "Mostrar _MENU_ filas por pagina",
                                    "sZeroRecords": "Datos no encontrados",
                                    "sInfo": "Mostrando _START_ a _END_ de _TOTAL_ filas",
                                    "sInfoEmpty": "Sin entradas para mostrar",
                                    "sInfoFiltered": "",
                                    "sSearch": "Buscar",
                                    "sProcessing": "Buscando...",
                                    "sLoadingRecords": "Por favor espere - Cargando...",
                                    "sEmptyTable": "No se obtuvieron datos",
                                    "oPaginate": {
                                                "sFirst": "Primera",
                                                "sPrevious": "Anterior",
                                                "sNext": "Siguiente",
                                                "sLast": "Ultima"
                                              }

                                    },
                        "aoColumns":[
                                     {'sname':'id', 'sType':'numeric', 'bVisible':true},
                                     {'sName':'Titulo', 'sType':'string','bVisible':true},
                                     {'sName':'Subtitulo', 'sType':'string','bVisible':true},
                                     {'sName':'Fecha', 'sType':'date','bVisible':true},
                                     {'sName':'Acceder', 'sType':'numeric','bVisible':true}
                                     ],
                        "oTableTools": {
                                   "sRowSelect": "single",                      
                                   "fnRowSelected": function( node ) {
                                     alert("Clicked");
                                       }
                        } 
                 })


        },
        error: function(jqXHR, textStatus, errorThrown){ 
                alert("error ==>" + jqXHR.responseText);
                alert("error ==>" + jqXHR.textStatus);
                alert("excepcion ==>" + errorThrown); 

        }

}); //ajax

注: .live()、.on()、.click() と結び付けましたが、機能しません。

繰り返しますが、問題は ajax によって挿入された行が検出されないことだと思います。

今までありがとうございました。私がはっきりしていたことを願っています。コメントお待ちしております。

ありがとうございました。よろしく。

4

1 に答える 1

1

問題は、jQuery が最初に実行されたときに要素が存在しないことです。以前に使用on()したことがあるとおっしゃいましたが、そのコードは含まれていませんでした。私はあなたがそれを間違って実装したと仮定しています（つまり、おそらく委任されたイベントアプローチを使用していませんでした）. 次のようになります。

$('#tabla tbody').on('mouseenter', 'tr', function() {
    $(this).addClass("ui-state-hover");
});
$('#tabla tbody').on('mouseleave', 'tr', function() {
    $(this).removeClass("ui-state-hover");
});

on()DOM にまだ存在しない要素にイベント ハンドラをバインドできます。この場合、イベント ハンドラーをアタッチしています#tabla tbody(最初のドキュメントの読み込み時に存在する必要があります)。したがって、 の子孫要素からのイベントが発生すると、それらは に結び付けられたイベント ハンドラー#tabla tbodyにバブルアップされ、イベント タイプ (この場合) と、ターゲット要素がフィルター基準を満たしているかどうか (この場合) に基づいて決定されます。要素は下にある必要があります)、ハンドラーはそのターゲット要素で実行されます。on()#tabla tbodymouseenter/mouseleavetr#tabla tbody

ここにドキュメントがあります：http://api.jquery.com/on/

mouseover/mouseout の代わりに mouseenter/mouseleave を指定したことに注意してください。これはおそらく、子要素 (つまりtdの) もホバーされたときにこれらのイベントが発生するのではなく、これが実際に必要な動作であるためです。これは、mouseover/mouseout で発生します。

于 2013-09-18T00:24:36.000 に答える