colorbox cannot apply on dynamic appended html element

I am implementing the colorbox plugin like this .

In following html, image can apply the colorbox plug-in and pop up original image successfully.

<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>

However, when same html code loaded from jquery append function, it loss the functionality of colorbox .

<script>

$(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>");

});

any solution for this?

Answers


what if you do like this ?

$("#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>");

You should assign Colorbox after you have appended the elements you are trying to bind an event to. For example:

$(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();
});

I'm sure that you have a way of doing this, but in the rare instance where that would be difficult for whatever reason, then you could do something like this:

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

Need Your Help

Constraints when using WCF for an online multiplayer game

c# wcf communication

I want to build a service oriented game server and client using WCF where users can play card games on different tables after they logged in with an account.

iPad running iPhone app stops responding when UIImagePickerController is closed (using cocos2d)

ios iphone objective-c ipad cocos2d-iphone

Okay, so I'm a little confused about how to use the ipad image picker. I have 2 apps. One is an HD version built just for ipads. The other is a regular version built for iPhones (which have to be