Как объявить объект JQuery до его существования?

Question

Я хочу знать, как объявить объект JQuery до того, как он существует.

Я объясняю свою проблему:

Я строю приложение с JQuery и я организовать свой код, как это описано в документации JQuery здесь: https://learn.jquery.com/code-organization/concepts/

Я написал код, подобный этому:

var foo = { 
    init : function(){ 
     foo.config = { 
      element : $('.myDiv') 
     } 
    } 
}; 

var bar = { 
    fooBar : function(){ 
     $(someData).each(function(){ 
      $('.anotherDiv').append("<div class='myDiv'></div>"); 
     }); 

     foo.config.element.click(function(){ 
      alert('It doesn\'t works for me'); 
     }); 
    } 
} 

$(function(){ 
    foo.init(); 
    bar.fooBar(); 
}); 

Итак, когда я нажимаю на div, предупреждение не отображается. Я знаю, что существует метод delegate() или on(), но он не работает.

Я думаю, это потому, что, когда страница загружается, объект еще не существует.

Является ли моя гипотеза жизнеспособной?

Answer 1

Вам необходимо найти элемент DOM не в момент выполнения foo.init();, но на данный момент вам нужен элемент - назначить его обработчик click.

Изменение element к функции:

var foo = { 
    init : function(){ 
     foo.config = { 
      element : function() { return $('.myDiv'); } 
     } 
    } 
}; 

var bar = { 
    fooBar : function(){ 
     $(someData).each(function(){ 
      $('.anotherDiv').append("<div class='myDiv'></div>"); 
     }); 

     foo.config.element().click(function(){ 
      alert('It doesn\'t works for me'); 
     }); 
    } 
} 

Answer 2

Если он еще не существует, вы должны использовать .on - после вашего дизайна выше, и при условии, есть некоторый контейнер, который присутствует на странице загрузки:

foo.config = { 
    //element : $('.myDiv'), 
    element: ".myDiv", 
    container: $("body") 
} 

Handler:

foo.config.container.on("click", foo.config.element, function(){ 

}); 

Answer 3

Ваш создан прямой

var foo = { 
    init : function(){ 
     foo.config = { 

прямой выбор предметов на данный момент (не один созданный еще)

  element : $('.myDiv') 
     } 
    } 
}; 

var bar = { 
    fooBar : function(){ 
     $(someData).each(function(){ 
      $('.anotherDiv').append("<div class='myDiv'></div>"); 
     }); 

свяжешь обработчик пустой группы

 foo.config.element.click(function(){ 
      alert('It doesn\'t works for me'); 
     }); 
    } 
} 

Вы можете использовать косвенную обработку, как это событие:

var foo = { 
     init: function() { 

Created косвенную щелчка слушателя в документе. Один будет обрабатывать все распространенные события щелчка из каждого .myDiv, даже созданного в будущем.

  $(document).on('click', '.myDiv', function() { 
        alert('This mast work on any created div with class "myDiv"'); 
       }); 
       foo.config = { 
        elementSelector: '.myDiv' 
       } 
      } 
     }; 
    var bar = { 
     fooBar : function(){ 
      $(someData).each(function(){ 
       $('.anotherDiv').append("<div class='myDiv'></div>"); 
      }); 
     } 
    }