Question

Basically I am using JQuery and colorbox. I am using iframe class of colorbox.

So basically initiating with

$(".iframe44").colorbox({iframe:true, width:"80%", height:"80%"});

I am then using it on a element as

<div class="class1">
<a class="iframe44" href=xyz.php> Add New</a>
<ul>
</ul>
</div>

This piece of code is fine and the iframe pop’s out. The class also transforms to class=iframe44 cboxElement as expected.

So not I am running an AJAX call to get some values ( as JSON) and then using appendTo()to add stuff into the <ul> element. Like this

$(document).ready(function () {
    $.ajax({
        type : "GET",
        url : "values.php?type=init",
        dataType : "json",
        success : function (data) {
            //alert("success");
            var ul_data = '';
            var counter = 0;
            for (var val in data) {
                if (data.hasOwnProperty(val)) {
                    console.log(data[counter].variable1 + data[counter].variable2);
                    ul_data = ul_data + "<li><a class=\"iframe44\" href=value_edit.php?variable2=" + data[counter].variable2 + ">" + data[counter].variable1 + "</li>";
                }
                counter++;
            }
            $(ul_data).appendTo('#class1 ul');
        }
    });
});

Now the issue I am facing is that the newly appended ul_data into the <div> does not have the same characteristics of class=iframe44 cboxElement … rather it has is class=iframe44, and hence the popup is not coming.

Let me know if I am doing something wrong? Why is the class of appended data not coming correctly.

Any help appreciated !!!

Answer 1

add

$(".iframe44").colorbox({iframe:true, width:"80%", height:"80%"});

after

$(ul_data).appendTo('.class1 ul');