Javascript 当单击与动态创建的div关联时，Jquery Colorbox出现打开内联div的问题
我正在使用colorbox，它在html中创建的按钮上正常工作。 我需要colorbox触发器位于动态创建的div上，但它会导致cboxLoadedContent不加载内联内容。 如果我使用在HTML中创建的泛型div，内联将打开并显示内容 下面是我用来弹出框的jquery，唯一的区别是'trigger'divJavascript 当单击与动态创建的div关联时，Jquery Colorbox出现打开内联div的问题,javascript,jquery,html,inline,colorbox,Javascript,Jquery,Html,Inline,Colorbox,我正在使用colorbox，它在html中创建的按钮上正常工作。 我需要colorbox触发器位于动态创建的div上，但它会导致cboxLoadedContent不加载内联内容。 如果我使用在HTML中创建的泛型div，内联将打开并显示内容 下面是我用来弹出框的jquery，唯一的区别是'trigger'div $(".thingsObjects").colorbox({ inline:true, width:$(document)
$(".thingsObjects").colorbox({
inline:true,
width:$(document).width(),
height:$(document).height(),
onLoad:function() {
$('html, body').css('overflow', 'hidden'); // page scrollbars off
},
onClosed:function() {
$('html, body').css('overflow', ''); // page scrollbars on
}
});
function createPopUp(){
$(".thingsObjects").colorbox({
inline:true,
width:$(document).width(),
height:$(document).height(),
onLoad:function() {
$('html, body').css('overflow', 'hidden'); // page scrollbars off
},
onClosed:function() {
$('html, body').css('overflow', ''); // page scrollbars on
}
});
$(".inline").colorbox({
inline:true,
width:$(document).width(),
height:$(document).height(),
onLoad:function() {
$('html, body').css('overflow', 'hidden'); // page scrollbars off
},
onClosed:function() {
$('html, body').css('overflow', ''); // page scrollbars on
}
});
$('.popClose').bind('click', function(){
$.colorbox.close();
});
}
for (var i = thingAmount; i > 0; i -= 1) { // cycle through and create new thing div
$(".thingsObjects").prepend('<div class="thingsFront' + ' ' + thingsOptions[nextIndex] + (i) + ' ' + nextMenu +'"></div>');
var currentThing = ".Shoes" + (i) ; // var to hold changeable div
$(currentThing).css({'background-image':'url(' + SHOESImageList[i-1] + ')', 'opacity':1 })
.waitForImages(function() {
}, function(loaded, count, success) {
var img = new Image;
img.src = $(currentThing).css('background-image').replace(/url\(|\)$/ig, "");
changePropertiesOfThumbs(howManyMade);
howManyMade ++;
if (howManyMade >= thingAmount){
repopulationFinished();
}
}, $.noop, true);
}
看起来您将属性内联拼写为Hinline。
如果您还可以为动态div创建添加代码，那就太好了。在将Div添加到DOM之后，您需要调用colorbox方法。一旦我创建了一个裸体测试，我发现我忘记了用href=inline\u内容预先添加新Div。它在我下面创建的测试中有效，但在我的主站点中无效。我注意到，对于每个colorbox调用，一个新类cboxElement被添加到div中，我猜这就是问题所在，因为在我上面的代码中，cboxElement没有添加到我的动态div中 这是一个工作测试，可能会对某些人使用。它不会解决我的问题，但可能会解决其他人的问题 再次感谢您拨冗拨冗拨冗
<html>
<head>
<meta charset='utf-8'/>
<title>Colorbox Inline</title>
<script type="text/javascript" src="scripts/core/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="css/colorbox.css" />
<script src="scripts/core/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$(".inline").colorbox({
inline:true,
width:$(document).width(),
height:$(document).height(),
onLoad:function() {
$('html, body').css('overflow', 'hidden'); // page scrollbars off
},
onClosed:function() {
$('html, body').css('overflow', ''); // page scrollbars on
}
});
$('.popClose').bind('click', function(){
$.colorbox.close();
});
$(".testBtn").prepend('<div class="dynamicTest" href="#inline_content">NEW TEST BTN</div>');
$(".dynamicTest").colorbox({
inline:true,
width:$(document).width(),
height:$(document).height(),
onLoad:function() {
$('html, body').css('overflow', 'hidden'); // page scrollbars off
},
onClosed:function() {
$('html, body').css('overflow', ''); // page scrollbars on
}
});
});
</script>
</head>
<body>
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
<div class="testBtn">TESTER</div>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<div id="pop">
TEST CONTENT !
</div>
</div>
</div>
</body>
感谢punitdam，根据请求添加了用于创建dynamic div的代码，更改了prepend以解决以下问题，即动态div中缺少href=inline_内容。我还尝试将类cboxElement添加到div中，但仍然无效。