JavaScript (colorbox) doesn't work in loaded content via .load() jquery

Question

I found some related question, unfortunately I couldn't fix my code.

Brief:-
- I have a form in a "Colorbox" window, when I submit the form, I reload .. div id="reload" .. in the parent window to display the new submitted data.
- parent window is updated successfully and new data is loaded.


Issue:-
After loading the new data into the parent window via .load .. URLS with "Colorbox" class doesn't work as "Colorbox" links (work as normal links - open in full page).
- These links work properly before .load() new data
- I need these links to open with "Colorbox" after the .load

1. Parent Page:

            <script>
            $(document).ready(function ()
            {
            $(".popup_class1").colorbox({iframe:true, innerWidth:1100, innerHeight:550,
            overlayClose:true
            });

            });
            </script>

            <div id='reload'>
            <!-- data to be reloaded after submitting the form in the colorbox window -->
            <a href='sales_cc_item_edit.php?id_cci=$id_cci' class='popup_class1'>EDIT</a>
            </div>

2. Colorbox Page:
This page has a form ... after submitting the form AJAX success has a code to reload div in the parent page.

            <script>
                $(function() {
                    $.ajax({
                        url: "sales_action.php",
                        type: "post",
                        data: $(this).serialize(),
                        success: function () {

                            parent.$('#reload').load(parent.document.URL + ' #reload');

                        }
                    });
                });
            </script>

Your help highly appreciated.

Answer 1

After load() you need to reinitialize colorbox for newly created ".popup_class1". Also add ".popup_class1" to load link since without it you'll have double #reload in your parent.

Try this:

parent.$('#reload').load(parent.document.URL + ' #reload .popup_class1',
        function(){
            parent.$(".popup_class1").colorbox({iframe:true, innerWidth:1100, innerHeight:550,overlayClose:true});
});