JavaScriptモジュールでクリックイベントをバインドする

JavaScriptをmodule patternとして構造化して以来、クリックイベントの一部が機能しなくなりました。私のJavaScriptの他の部分はHTMLにDOMを追加するので、ボタンには$('body').on('click')を使う必要があります。最初のクリックイベントが動作しているJavaScriptモジュールでクリックイベントをバインドする

var s, 
MyApp = {  

    settings: { 
    fooButton: $(".foo-button"), 
    barButton: $(".bar-button") 
    },  

    init: function() { 
    s = this.settings; 
    this.bindEvents(); 
    },  

    bindEvents: function() { 
    // this works 
    s.fooButton.on("click", function() { 
     MyApp.clickButton("foo"); 
    });  

    // this does NOT work 
    $('body').on('click', s.barButton, function (event) { 
     MyApp.clickButton("bar"); 
    }); 
    },  

    clickButton: function(button) { 
    console.log("You clicked " + button) 
    }  

};

、第二ではありません。

これは私のモジュールは、現在のように見えるものです。 JavaScriptコードで作成された要素のバインドとイベントはどうすればできますか？

出典

2016-05-02 idleberg

試し '$（ '体'）。上（）、s.barButton.attr（ "ID" 'クリック'、機能（イベント）{...'代わりに。 –

あなたが持っているので、作成されたオブジェクト（つまり、s.fooButtonやs.barButton）への参照は '$（ 'body'）。on（ 'click'、 'selector'、...）'を使う必要はありません。単純に 's.fooButton.on（" click "、function ...' – James