Question

I have a method which is called onClick of some element. In that function I have an event handler( JQuery $().click() ), that detects the click of a button and performs some action.

I have noticed that the event handler works fine as long as it is the last block of statement in the function and is skipped altogether if there lie certain code block after it. Why is that happening?

EDIT Adding code

  function launchPopUp(ID) {
            if ($('#popUp').is(':hidden')) {
                var serial = ID.id; // ID of the element or area clicked.
                var headData = 'SVG PopUp';
                var entData = 'Enter the data you want to store:';
                var ok = "No";
                var input = "";

                var header = addHeader(headData);
                var enterable = addEnterable(entData);
                var buttons = addButtons();

                $('#popUp').append(header);
                $('#popUp').append(enterable);
                $('#popUp').append(buttons);
                $('#popUp').show();

                $('#btnSubmit').click(function() {
                    input = document.getElementById('txtData').value;
                    if (input != "") {
                        ok = "yes";
                        $(ID).css('fill', 'green'); // Change colour to green only if some valid data is entered.
                        closePopUp();
                    }

                });
                var collData = { "ID": serial, "header": headData, "OK": ok, "input": input };
                collection.push(collData);
            }  
        }

Control is jumping straightaway to the code block after the .click()

Answer 1

You are misunderstanding the event handlers.

Javascript has asynchronous nature, so (in normal cases) there is no “waiting” for an event.

You register an eventhandler like your click() and then the function is executed when (eventually) a click on that element is registered. In the meantime the execution of the rest of your code goes on.

If you want to make your code dependent on the click, you have to write this code into the function of the click handler or pass a callback to the function.

Registering Event-Handlers is a one-time process and has to be done outside your function – at the moment you are registering a new click-handler every time you call launchPopUp. E.g. if you are calling launchPopUp five times, your code

input = document.getElementById('txtData').value;
if (input != "") {
    ok = "yes";
    $(ID).css('fill', 'green'); 
    closePopUp();
}

also gets executed five times as soon as you click on #btnSubmit.

Basically you have to structure your code like the following:

1. register eventhandler for #btnSubmit – define what is happening when the button is clicked in this function (evaluation of your inputs)
2. write the launchPopUp function which gets eventually executed. No eventhandler in here and no evaluation code on btnSubmit this is all done in your eventhandler.