61,112
社区成员
发帖
与我相关
我的任务
分享jquery添加弹出层
代码如下
$(function() {
$.ajax({
type:'POST',
url: 'hhWebsiteInfoController.do?website-getDt',
dataType:'json',
data:'',
success:function(json){
alert(1);
var dts = json.attributes.dts;
$("#news").empty();
if(typeof(dts)!=undefined){
for(var i=0;i<dts.length;i++){
var a = "<div class='col-md-3 col-sm-3 wow fadeIn' data-wow-delay='0.6s' ><a>"+dts[i].title+"</a></div>";
var b = "<img id='test2' src='"+dts[i].pic1+"'>";
var c = a+b;
// var d =" <img id='test2' src='"+dts[i].pic1+"'>";
$("#news").append(c);
}
}}
});
$('#test2').on('click', function() {
// alert(2);
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '<div style="padding:20px;" id="test3">自定义内容444</div>'
});
});
});
点击id=“test2"的图片没反应，不弹出弹出层，为什么啊？？
$(function() {
$.ajax({
type:'POST',
url: 'hhWebsiteInfoController.do?website-getDt',
dataType:'json',
data:'',
success:function(json){
alert(1);
var dts = json.attributes.dts;
$("#news").empty();
if(typeof(dts)!=undefined){
for(var i=0;i<dts.length;i++){
var a = "<div class='col-md-3 col-sm-3 wow fadeIn' data-wow-delay='0.6s' ><a>"+dts[i].title+"</a></div>";
var b = "<img id='test2' src='"+dts[i].pic1+"'>";
var c = a+b;
// var d =" <img id='test2' src='"+dts[i].pic1+"'>";
$("#news").append(c);
}
}}
});
$('#test2').on('click', function() {
// alert(2);
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '<div style="padding:20px;" id="test3">自定义内容444</div>'
});
});
});
点击id=“test2"的图片没反应，不弹出弹出层，为什么啊？？
...全文
请发表友善的回复…
发表回复
逝_去_的_光_阴 2016-01-04
- 打赏
- 举报
live不好用？live就是为当前或未来的匹配元素添加一个或多个事件处理器
你什么版本jquery？1.9+？
那你还是换回on吧
$(document).on("click",".test2",function(){
qq_28573739 2016-01-04
- 打赏
- 举报
改完了$.ajax({
type:'POST',
url: 'hhWebsiteInfoController.do?website-getDt',
dataType:'json',
data:'',
success:function(json){
alert(1);
var dts = json.attributes.dts;
$("#news").empty();
if(typeof(dts)!=undefined){
for(var i=0;i<dts.length;i++){
var a = "<div class='col-md-3 col-sm-3 wow fadeIn' data-wow-delay='0.6s' ><a>"+dts[i].title+"</a></div>";
var b = "<img class='test2' src='"+dts[i].pic1+"'>";
var c = a+b;
// var d =" <img id='test2' src='"+dts[i].pic1+"'>";
$("#news").append(c);
}
}}
});
$('.test2').on('click', function() {
// alert(2);
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '<div style="padding:20px;" class="test3">自定义内容444</div>'
});
});
});
还是不好使哎 - -[/quote]
$('.test2').on('click', function()
改成
$('.test2').live('click', function()[/quote]
$('.test2').live('click', function() {
alert(2);
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '<div style="padding:20px;" class="test3">自定义内容444</div>'
});
});
<div id="news">
<div class="col-md-3 col-sm-3 wow fadeIn" data-wow-delay="0.6s" >11111111111</div>
<div class="col-md-3 col-sm-3 wow fadeIn" data-wow-delay="0.6s"><a href="images/portfolio-img3.jpg" data-lightbox-gallery="portfolio-gallery"><div>2222222222222</div></a></div>
<div class="col-md-3 col-sm-3 wow fadeIn" data-wow-delay="0.6s"><a href="images/portfolio-img4.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img4.jpg" alt="portfolio img"></a></div>
<div class="col-md-3 col-sm-3 wow fadeIn" data-wow-delay="0.6s"><a href="images/portfolio-img5.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img5.jpg" alt="portfolio img"></a></div>
<div class="col-md-3 col-sm-3 wow fadeIn" data-wow-delay="0.6s"><a href="images/portfolio-img6.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img6.jpg" alt="portfolio img"></a></div>
<div class="col-md-3 col-sm-3 wow fadeIn" data-wow-delay="0.6s"><a href="images/portfolio-img7.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img7.jpg" alt="portfolio img"></a></div>
<div class="col-md-3 col-sm-3 wow fadeIn" data-wow-delay="0.6s"><a href="images/portfolio-img8.jpg" data-lightbox-gallery="portfolio-gallery">33333333333</a></div>
</div>
<img class='test2' src='"+dts[i].pic1+"'>
换了更不好使了= = 本来 页面写死的<img class='test2' src='"+dts[i].pic1+"'>还好用呢
逝_去_的_光_阴 2016-01-04
- 打赏
- 举报
改完了$.ajax({
type:'POST',
url: 'hhWebsiteInfoController.do?website-getDt',
dataType:'json',
data:'',
success:function(json){
alert(1);
var dts = json.attributes.dts;
$("#news").empty();
if(typeof(dts)!=undefined){
for(var i=0;i<dts.length;i++){
var a = "<div class='col-md-3 col-sm-3 wow fadeIn' data-wow-delay='0.6s' ><a>"+dts[i].title+"</a></div>";
var b = "<img class='test2' src='"+dts[i].pic1+"'>";
var c = a+b;
// var d =" <img id='test2' src='"+dts[i].pic1+"'>";
$("#news").append(c);
}
}}
});
$('.test2').on('click', function() {
// alert(2);
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '<div style="padding:20px;" class="test3">自定义内容444</div>'
});
});
});
还是不好使哎 - -[/quote]
$('.test2').on('click', function()
改成
$('.test2').live('click', function()
qq_28573739 2016-01-04
- 打赏
- 举报
改完了$.ajax({
type:'POST',
url: 'hhWebsiteInfoController.do?website-getDt',
dataType:'json',
data:'',
success:function(json){
alert(1);
var dts = json.attributes.dts;
$("#news").empty();
if(typeof(dts)!=undefined){
for(var i=0;i<dts.length;i++){
var a = "<div class='col-md-3 col-sm-3 wow fadeIn' data-wow-delay='0.6s' ><a>"+dts[i].title+"</a></div>";
var b = "<img class='test2' src='"+dts[i].pic1+"'>";
var c = a+b;
// var d =" <img id='test2' src='"+dts[i].pic1+"'>";
$("#news").append(c);
}
}}
});
$('.test2').on('click', function() {
// alert(2);
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '<div style="padding:20px;" class="test3">自定义内容444</div>'
});
});
});
还是不好使哎 - -
逝_去_的_光_阴 2016-01-04
- 打赏
- 举报
顺便把on绑定事件改成live比较好
逝_去_的_光_阴 2016-01-04
- 打赏
- 举报
id不能重复啊 <img id='test2'改成<img class='test2'吧
qq_28573739 2016-01-04
- 打赏
- 举报
[quote=引用 10 楼 u011376884 的回复:]
这样？
$(document).on('click',".test2",function() {
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '<div style="padding:20px;" class="test3">"+quanju[dataIndex].summary+"</div>'
});
});
});
qq_28573739 2016-01-04
- 打赏
- 举报
[quote=引用 10 楼 u011376884 的回复:]
test2 click事件里先取dataIndex的值 再取前面全局变量对应索引的对象 然后赋值 这个不懂啊 咋写的..
success:function(json){
alert(1);
var dts = json.attributes.dts;
$("#news").empty();
var quanju = dts;
if(typeof(dts)!=undefined){
for(var i=0;i<dts.length;i++){
var a = "<div class='col-md-3 col-sm-3 wow fadeIn' data-wow-delay='0.6s' ><a>"+dts[i].title+"</a></div>";
var b = "<div class='test2' dataIndex="+i+"><img class='test2' src='"+dts[i].pic1+"'></div>";
var d = "<div class='col-md-3 col-sm-3 wow fadeIn' data-wow-delay='0.6s' ><a>"+dts[i].summary+"</a></div>";
var c = a+b;
$("#news").append(c);
}
}}
});
$(document).on('click',".test2",function() {
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '<div style="padding:20px;" class="test3">内容</div>'
});
});
});
success:function(json){
alert(1);
var dts = json.attributes.dts;
$("#news").empty();
var quanju = dts;
if(typeof(dts)!=undefined){
for(var i=0;i<dts.length;i++){
var a = "<div class='col-md-3 col-sm-3 wow fadeIn' data-wow-delay='0.6s' ><a>"+dts[i].title+"</a></div>";
var b = "<div class='test2' dataIndex="+i+"><img class='test2' src='"+dts[i].pic1+"'></div>";
var d = "<div class='col-md-3 col-sm-3 wow fadeIn' data-wow-delay='0.6s' ><a>"+dts[i].summary+"</a></div>";
var c = a+b;
$("#news").append(c);
}
}}
});
$(document).on('click',".test2",function() {
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '<div style="padding:20px;" class="test3">内容</div>'
});
});
});逝_去_的_光_阴 2016-01-04
- 打赏
- 举报
你建一个全局变量，把dts赋值给它，
ajax循环的时候, class='test2'后边加上自定义属性(举例：dataIndex) 值为 i
var b = "<div class='test2' dataIndex='"+i+"'><img class='test2' src='"+dts[i].pic1+"'></div>";
test2 click事件里先取dataIndex的值 再取前面全局变量对应索引的对象，
然后赋值就行了
qq_28573739 2016-01-04
- 打赏
- 举报
live方法1.9+不支持了 被on取代了
显示弹层之前，先发条ajax根据id去数据库查出那条信息，把数据带会页面再显示弹层，
注意ajax异步请求和页面赋值的时间差[/quote]
我在这已经查到数据库图片信息的其他字段了$.ajax({
type:'POST',
url: 'hhWebsiteInfoController.do?website-getDt',
dataType:'json',
data:'',
success:function(json){
alert(1);
var dts = json.attributes.dts;
$("#news").empty();
if(typeof(dts)!=undefined){
for(var i=0;i<dts.length;i++){
var a = "<div class='col-md-3 col-sm-3 wow fadeIn' data-wow-delay='0.6s' ><a>"+dts[i].title+"</a></div>";
var b = "<div class='test2'><img class='test2' src='"+dts[i].pic1+"'></div>";
//var d = "<div class='col-md-3 col-sm-3 wow fadeIn' data-wow-delay='0.6s' ><a>"+dts[i].summary+"</a></div>";
var c = a+b;
$(".test3").append(c);
$("#news").append(c);
}
这是弹出层
$(document).on('click',".test2",function() {
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '<div style="padding:20px;" class="test3">ss</div>'
});
});
});
我觉得$(".test3").append(c);就把别的字段信息加到弹出层了
逝_去_的_光_阴 2016-01-04
- 打赏
- 举报
live方法1.9+不支持了 被on取代了
显示弹层之前，先发条ajax根据id去数据库查出那条信息，把数据带会页面再显示弹层，
注意ajax异步请求和页面赋值的时间差
qq_28573739 2016-01-04
- 打赏
- 举报
live不好用？live就是为当前或未来的匹配元素添加一个或多个事件处理器
你什么版本jquery？1.9+？
那你还是换回on吧
$(document).on("click",".test2",function(){[/quote]
终于好用了
$('.test2').live('click', function() {改了就好了 为啥啊？
还有个问题 大神我要弹出层显示图片链接 在数据库的那条记录的其他内容怎么通过数据库id找到显示啊 ?
$('.test2').live('click', function() {改了就好了 为啥啊？
还有个问题 大神我要弹出层显示图片链接 在数据库的那条记录的其他内容怎么通过数据库id找到显示啊 ?
