另一个 JavaScript 事件处理程序

Question

所以我想做的是，当另一个按钮(#settings-ico)上发生点击事件时，在一组元素(图 block )上添加一个事件处理程序。

因此进行描述:“启用”开关后，一组元素将获取事件处理程序 <.onClick>，因此当其中一个元素发生单击时，将显示一个对话框。

但我的代码实际发生的情况是，“启用”按钮后，对话框立即显示，而不是等待单击其中一个元素。

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");
    }
    // - - - - - - - - - - - - - - - - - - ^

Answer 1

注册事件监听器时不应该及时调用事件处理函数:

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

应该是:

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