个人中心
gpt4 book ai didi

javascript - Jquery 无法正确加载表内动态创建的元素

转载 作者：行者123 更新时间：2023-12-02 15:44:23 25 4
gpt4 key购买 nike

我正在使用 datatables.net 和 boostrap，在图像上具有悬停效果。扩展表格内的图像必须与表格外的图像相同，找不到原因:

http://jsfiddle.net/rokas_m/rqokaub2/ 

<!DOCTYPE html>
<html>
<head>
  <title>timeline</title>
  <meta charset="UTF-8" />

  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="timeline2.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">



<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<style>

.thumbnail {
    position:relative;
    overflow:hidden;
}

.caption {
    position:absolute;
    top:0;
    right:0;
    background:rgba(66, 139, 202, 0.75);
    width:100%;
    height:100%;
    padding:2%;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
}
 img {
            max-height: none;
            min-height: 0;
                   }
                    td.details-control {
        background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
        cursor: pointer;
        }
        tr.shown td.details-control {
            background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
        }
</style>
</head>
<body>
<div class="col-md-8">


                  <div class="panel panel-default">
                            <div class="panel-body">

                                        <table id="table" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th >Pavadinimas</th>
                <th >Antraštė</th>
                <th>Tipas</th>
                <th>Išsiuntimo / gavimo data</th>
                <th>Data</th>
                <th>Dokumento nr.</th>
            </tr>
        </thead>

    </table>
         <div class="col-md-3">
              <div class="thumbnail">
                <div class="caption">
                    <h6>Dokumentas.doc</h6>

                    <p><a href="" class="label label-danger" rel="tooltip" title="View">Žiūrėti</a>
                    <a href="" class="label label-default" rel="tooltip" title="Add">Pridėti</a></p>
                </div>
                <img src="http://icons.iconarchive.com/icons/graphicloads/filetype/64/pdf-icon.png" alt="..."></img>
                </div>
                                       </div>   
                                <div class="col-md-3">
              <div class="thumbnail">
                <div class="caption">
                    <h6>Dokumentas.doc</h6>

                    <p><a href="" class="label label-danger" rel="tooltip" title="View">Žiūrėti</a>
                    <a href="" class="label label-default" rel="tooltip" title="Add">Pridėti</a></p>
                </div>
                <img src="http://icons.iconarchive.com/icons/graphicloads/filetype/64/word-doc-icon.png" alt="..."></img>
                </div>
                                       </div>                         


                            </div>
                        </div>
                </div>

<script>
     /* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table>'+
        '<tr >'+
            '<td><strong>Dokumentai:&#160;</strong></td>'+
           '<td><div>'+
             '<div class="thumbnail">'+
                '<div class="caption">'+
                    '<h6>'+d.dokumentai+'</h6>'+                    
                   '<p><a href="" class="label label-danger" rel="tooltip" title="View">Žiūrėti</a>'+
                    '<a href="" class="label label-default" rel="tooltip" title="Add">Pridėti</a></p>'+
                '</div>'+
                    '<img src="'+d.dok_ikona+'"></img>'+
                    '</div>'+
             '</div></td>'+ 



        '</tr>'+

    '</table>';

}

$(document).ready(function() {
    var table = $('#table').DataTable( {
        "order": [[ 3, "desc" ]],
        "paging":   false,
        "searching": false,
        "data": [
    {
      "pavadinimas": "Pretenzijos, reikalavimai Biurui",
      "antraste": "Dėl išmokos",
      "tipas": "Gautas",
      "siunt_gav_data": "2015/08/24",
      "data": "2011/04/25",
      "dok_nr": "G00-100",
      "dokumentai": "dokumentas.doc",
      "dok_ikona": "http://icons.iconarchive.com/icons/graphicloads/filetype/64/pdf-icon.png"
    },
    {
      "pavadinimas": "Pretenzijos, reikalavimai Biurui",
      "antraste": "Dėl išmokos",
      "tipas": "Gautas",
      "siunt_gav_data": "2015/08/25",
      "data": "2011/04/26",
      "dok_nr": "G00-101", 
      "dokumentai": "dokumentas.pdf",
       "dok_ikona": "http://icons.iconarchive.com/icons/graphicloads/filetype/64/pdf-icon.png"


    }
        ],
        "columns": [
            {
                "className":      'details-control',
                "data":           null,
                "defaultContent": ''
            },
            { "data": "pavadinimas" },
            { "data": "antraste" },
            { "data": "tipas" },
            { "data": "siunt_gav_data" },
            { "data": "data" },
            { "data": "dok_nr" }
        ],
        "aoColumnDefs": [
          { 'bSortable': false, 'aTargets': [ 0,1,2,3 ] }
       ]
          } );

    // Add event listener for opening and closing details
    $('#table tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }

    } );
} );

             $( document ).ready(function() {
    $("[rel='tooltip']").tooltip();    

    $('.thumbnail').hover(
        function(){
            $(this).find('.caption').slideDown(250); //.fadeIn(250)
        },
        function(){
            $(this).find('.caption').slideUp(250); //.fadeOut(205)
        }
    ); 
});

</script>
</body>
</html>

最佳答案

http://jsfiddle.net/rqokaub2/1/

我更改了该部分:

$('.thumbnail').hover(
  function(){
    $(this).find('.caption').slideDown(250); //.fadeIn(250)
  },
  function(){
    $(this).find('.caption').slideUp(250); //.fadeOut(205)
  }
);

并使用它:

$(document).on('mouseenter', '.thumbnail', function(){
  $(this).find('.caption').slideDown(250); //.fadeIn(250)
});
$(document).on('mouseleave', '.thumbnail', function(){
  $(this).find('.caption').slideUp(250); //.fadeOut(205)
});

直接使用hover/click等的绑定(bind)函数将仅应用于加载的元素。但是，当您使用 on 方法(过去的 live)时，所有元素(如果那些尚未加载的元素将被绑定(bind))。 on 方法非常有用，尤其是当您使用通过 AJAX 加载的大量内容时

关于javascript - Jquery 无法正确加载表内动态创建的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32325542/

25 4 0
文章推荐： javascript - Chrome 扩展 - javascript 中的功能无法正常工作
文章推荐： google-maps - 如何使用 Angular 谷歌地图在 Google map 中添加我的位置按钮？
文章推荐： r - 在 "."中的 `fread` 中使用 sep = "data.table"
文章推荐： javascript - 如何在单个页面中获取多个 EditorFor 的日期选择器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com