CODEWITHSUNDEEP
javascriptevent-handling
linearSpin
linearSpin

Reputation: 113

JavaScript event handler inside another

So what I'm trying to do is to add an event handler on group of elements(tiles), when a click event occurs on the another button(#settings-ico).

So making a description: after 'enabling' the switch, group of elements are getting the event handler <.onClick>, so when the click occurs on one of them a dialog is being shown.

But whats actually happening with my code, is that after 'enabling' the button, the dialog shows up immediately, instead waiting to one of the elements get clicked.

eventsHandler       : function() {

    var self = this;

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - -  *
    // - - - - - - - - - - - - - -               binded events  *


    $("#settings-ico").on("click", function() {

        console.log('settings-ico enabled');

        if(!self.editOn) {

            $(".b-row > a").on("click", tileOpenDialog() );
            self.editOn = 1;
        }
        else {

            $(".b-row > a").off("click", tileOpenDialog() );
            tileEditClose()
            self.editOn = 0;
        }
    });

    $("#tile-edit-save").on("click", tileEditSave );

    $("#tile-edit-close").on("click", tileEditClose );

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - -  *
    // - - - - - - - - - - - - - -             helper functions *


    function tileOpenDialog( ) {

        //e.preventDefault();
        var id = $(this).prop('id');
        self.editId = id;
        $( "#tile-edit" ).css("display", "block");
        console.log("${id} clicked");
    }
    // - - - - - - - - - - - - - - - - - - ^

Upvotes: 0

Views: 295

Answers (1)

Kasabucki Alexandr
Kasabucki Alexandr

Reputation: 630

You should not call event handler function in time when you register event listener:

$(".b-row > a").on("click", tileOpenDialog() );

should be:

$(".b-row > a").on("click", tileOpenDialog );

Upvotes: 3

Related Questions