Jquery不能正确加载表中动态创建的元素
Jquery doesn't load correctly in dinamically created elements inside a table
我使用datatable .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: </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/
I Changed that part:
$('.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等的绑定函数将只应用于加载的元素。但是当您使用on方法(在过去的live)时，所有元素(事件中那些尚未加载的元素将被绑定)。on方法是非常有用的，特别是当你使用大量的内容通过AJAX加载
当您到达这行代码时:
$('.thumbnail').hover(
表尚未填充;因此，在处理加号点击的函数中，你必须再次添加代码，使悬停效果在外部图像中
使用以下代码设置图像悬停:
$("[rel='tooltip']").tooltip();
$(document).on("mouseenter", ".thumbnail", function() {
$(this).find('.caption').slideDown(250); //.fadeIn(250)
});
$(document).on("mouseleave", ".thumbnail", function() {
$(this).find('.caption').slideUp(250); //.fadeOut(205)
});
小提琴链接
相关文章：
- onkeyup无法动态创建多个文本区域
- 如何使用javascript从主svg对象动态创建svg视图框
- 在动态创建的元素上获取对特定选择器的引用
- JQuery对动态创建的对象进行选择
- 使用jquery动态创建ul-li
- 从动态创建的html选择中选择所选选项
- 如何在动态创建的节点上绑定函数
- 动态创建OnClick事件Javascript
- 谷歌地图动态创建的标记点击事件使用相同的标记
- 在动态创建的标记上添加事件
- 动态创建一个javascript/jquery多级数组
- 如何动态创建许多Jquery颜色选择器(eyecon）
- 如何为动态创建的文本区域中输入的值更新ng模型
- 对动态创建的元素运行jQuery.ech(）
- 使用jQuery访问动态创建的项
- 动态创建的iframe中的window.onerror在lne 0处给出脚本错误
- 当用户点击动态创建的链接时，如何调用JS方法.JQuery，ASP.NET MVC
- 我想将链接关联到动态创建的p元素上的相应文章
- AngularJs从列表中动态创建指令
- 使用javascript动态创建html内容/元素
