jQuery assign click event handler on page load

Question

I want to assign a click handler for button in the page load function. I then want to handle the actual click of the button at a later time with the following code snippet:

 $("#finish").off('click').on('click', function () {
            var sku = $("#productSKU").val();
            var name = $("#productName").val();
            var affiliateId = $("#AffiliateID").val();
            var Errors = "";
            var category = null;
            var defaultName = $('#defaultImgName').val();

            if ($("#childCategories_" + categoryLevel).length == 0) {
                category = $("#categoryList").val();
            }
            else if ($("#childCategories_" + categoryLevel).val() == 0) {
                category = null;
            }
            else {
                category = $("#childCategories_" + categoryLevel).val();
            }

            if (!sku) {
                Errors += "<li> You can not add a product without an Item Code</li>";
            }
            if (!name) {
                Errors += "<li> You can not add a product without a Name</li>";
            }
            if (!category) {
                Errors += "<li> You can not add a product without a Category</li>";
            }

            if (Errors != "") {
                cua({ text: Errors, type: 'danger' })
            }
            else {
                data.formData = { productName: name, productSKU: sku, affiliateID: affiliateId, categoryID: category, defaultImgName: defaultName }
                data.submit();
            }
        });

How do I assign the click event handler in the page load, and then trigger the actual event of the click later on?

Reason for this is it's causing errors where the button is unresponsive if an image is not uploaded, which I found to be caused by an event handling problem.

Please clarify "trigger the actual event of the click later on". — André Dion, May 09 '16 at 11:23
And also "button is unresponsive if an image is not uploaded" :) — ptrk, May 09 '16 at 11:24
So I want to initialise the click event handler in the page load function. The function for image upload is very long (maybe 100 lines). It has a bunch of 'on' event handlers for hidden ids following the click event of 'finish' button — Mark, May 09 '16 at 11:35

yezzz · Answer 1 · 2016-05-09T12:10:48.430

1

$(document).ready(function(){
    $("#finish").on('click', yourfunctionhere)
});

You can put your code in a seperate function, so if you want to turn it off, then on again you can do it with just 1 line of code.

$("#finish").on('click', yourfunctionhere)

To execute the function you can trigger the click (when the handler is on):

$("#finish").trigger('click');

(thanks @putvande for reminding)

edited May 09 '16 at 12:10

answered May 09 '16 at 11:45

yezzz

2,990
1
10
19

i think [this](http://stackoverflow.com/questions/10920355/attaching-click-event-to-a-jquery-object-not-yet-added-to-the-dom) can help you to resolve issue. – TechnoCrat May 09 '16 at 11:50
that's for delegated events. Binding to the document. Needed if #finish is removed then readded. – yezzz May 09 '16 at 11:57
Thank you. However now I am getting an uncaught ReferenceError: data is not defined on the: data.formData = { productName: name, productSKU: sku, affiliateID: affiliateId, categoryID: category, defaultImgName: defaultName } – Mark May 10 '16 at 00:03
an example on eg. jsfiddle.net would be easier to test. Did you put the function with your code inside $(document).ready() { } ? – yezzz May 10 '16 at 00:45

jQuery assign click event handler on page load

1 Answers1