Jquery 触发器 function 未准备好文档

Question

I am working with Php and jquery, I have two buttons for "preview" and "download" content/image But i want whenever i load page(open webpage) then Content/Image should download(trigger should work) Here is my code for "Preview" and "Download"

<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 5000px;
        Lorem Ipsum dummy text...
    </div>
    
      <input id="btn-Preview-Image" type="button" value="Preview"/>
    <a id="btn-Convert-Html2Image" href="#">Download</a>
    <br/>
    <h3>Preview :</h3>
    <div id="previewImage">
    </div>

var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
    $("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
         onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
             }
         });
    });

    $("#btn-Convert-Html2Image").on('click', function () {
    var imgageData = getCanvas.toDataURL("image/png");
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
    });
</script>

And here i tried so far,Where i am wrong?

<script>
$("document").ready(function(){
$("#btn-Preview-Image").trigger("click");
setTimeout(function() {
     $("#btn-Convert-Html2Image").trigger("click");
}, 5000);
});

Answer 1

    <script>
/* document ready to load all thing once document ready */
$(document).ready(function(){
    var element = $("#html-content-holder"); // global variable
    var getCanvas; // global variable
    $("#btn-Preview-Image").on('click', function () {
        alert("I m preview");return false;
         /* Your code what you need to do */
    });
    $("#btn-Convert-Html2Image").on('click', function () {
        alert("I m download");return false;
        /* your code to download image */
    });
    /* Trigger event  */  
    $(document).find("#btn-Preview-Image").trigger("click");
    setTimeout(function() {
        $(document).find("#btn-Convert-Html2Image").trigger("click");
    }, 2000);
});
</script>

You have not used find, as if we have to trigger an event in any of the buttons in the whole document we might first need to find that SELECTOR, and then we might perform an action on it. The other thing you have not done is you have not kept the events in the ready function.