Q: initiating Colorbox when ajax content is loaded After rendering the ajax response in template, I am showing following contents. When I click on content then colorbox popup. and It works.
Now I want to popup colorbox automatically without any click. I also tried trigger event. but it does not work. can you please help? Thanks
<a id="login_to_apply_coupon" >Click here</a>

JS Code
           <script>
               $("#login_to_apply_coupon").on( "click", function(e) {
                   e.preventDefault();

                   $.colorbox({
                       width:"400px",
                       href:'{% url popup-ajax-login %}?next={% url afshop_apply_coupon coupon_code=code %}',
                       height:"400px",
                       iframe:true,
                       onClosed:function(){
                           location.reload(true);
                       }
                   });
               });
           </script>

EDIT: I tried following answers. I get colorbox loading icon for a second without contents then colorbox disappear. 

A: How did you try to trigger the button? The following should work (some jQuery chaining):
       <script>
           $("#login_to_apply_coupon").on( "click", function(e) {
               // code
           }).click();
       </script>


A: if you want to show the colorbox on page load then simply call it in document's ready function
 $(document).ready(function(){
         $.colorbox({
         ...........
         ...........
        });
 });

