Question

我正在实施像this这样的colorbox插件。

在下面的html中，图像可以应用彩盒插件并成功弹出原始图像。

<?php
$word = "level";  // declare a varibale
echo "String: " . $word . "<br>";
$reverse = strrev($word); // reverse the word
if ($word == $reverse) // compare if  the original word is same as the reverse of the same word
echo 'Output: This string is a palindrome';
else
echo 'Output: This is not a palindrome';
?>

但是，当从jquery追加函数加载相同的html代码时，它会丢失colorbox的功能。

<div id="SHOWPIC">
<span style='text-align:center;margin:3px;'>
    <a href='images/cartoon.png' style='position:relative;' rel='external' class='group1' >
        <img src='images/cartoon.png' width='250' height='150' />
    </a>
</span>

任何解决方案？

Answer 1

如果你喜欢这个怎么办？

$("#SHOWPIC").html("<span style='text-align:center;margin:3px;'><a href='images/cartoon.png' style='position:relative;' rel='external' class='group1' ><img src='images/cartoon.png' width='250' height='150' /></a></span>");

Answer 2

在添加了尝试将事件绑定到的元素后，应该分配Colorbox。例如：

$(document).ready(function(){ 

    $("#SHOWPIC").append("<span style='text-align:center;margin:3px;'><a href='images/cartoon.png' style='position:relative;' rel='external' class='group1' ><img src='images/cartoon.png' width='250' height='150' /></a></span>");
    $('.group1').colorbox();
});

我确信你有办法做到这一点，但在极少数情况下，无论出于何种原因这都很难，那么你可以这样做：

$(document).ready(function(){ 
    $(document).one('click', '.group1', function(){
        $('.group1').colorbox();
        $(this).click();
    });
});

colorbox无法应用于动态附加的html元素

2 个答案: