Как настроить функцию $ (document) .ready внутри файла, загруженного $ .getScript - PullRequest
Новая
       16

Как настроить функцию $ (document) .ready внутри файла, загруженного $ .getScript

0 голосов
/ 29 января 2012

Я пытаюсь разделить код для веб-страницы, чтобы загрузить код только при необходимости.У меня есть один файл JavaScript, включенный в раздел заголовка моей страницы.На странице есть кнопка, которая при нажатии выводит div на передний план, а затем заполняет div с помощью $ .getScript.Недавно загруженный контент состоит из двух дополнительных элементов div и десяти кнопок.Однако кнопки не работают.Помещаю ли я код $ ('# element'). Click () на мою главную html-страницу, в свой основной файл javascript или в недавно загруженный файл, это не работает.У меня что-то неправильно отформатировано или это просто что-то, что никогда не будет работать? 

$(document).ready(function() {
        alert("Test");  /*     This works     */
        $('#slideButton1').click(function() {
                alert("Testing");     /*   This doesn't     */
        });
});

Кнопки генерируются с помощью следующего кода: 

function addGalleryButtons() {
        var sLabels = new Array("Aircraft","Avatars","BattleArmor","BattleMechs","Book Covers","Characters","Lego BattleTech","Maps","Naval Vessels","Vehicles");
        var leftIndent = 15;
        for(var i=0; i<sLabels.length; i++) {
                var slBtn = $(document.createElement('div')).attr('id','slideButton'+i);
                slBtn.addClass('base shadowed rad3 gSlideButton');
                slBtn.html(sLabels[i]);
                var slb = { 'left' : leftIndent+'px' , 'opacity' : '0.7' };
                slBtn.css(slb);
                slBtn.attr('title','slideButton'+i);
                slBtn.appendTo('#gallerySlider');
                leftIndent = leftIndent + $('#slideButton'+i).width() + 12;
        }
}

Ответы [ 4 ]

2 голосов
/ 29 января 2012

Прежде всего, было бы здорово, если бы вы могли предоставить jsFiddle .Вы не предоставляете информацию о порядке вызова этих двух функций.

Однако я бы написал это в комментарии, если бы мог, но из-за своей недостаточной репутации просто не могу.Поэтому я попытаюсь найти подход к вашему решению здесь.

Unline czarchaic, я бы не стал использовать on.Я бы использовал live метод.Проверьте документацию для получения дополнительной информации, списков параметров и примера.Есть некоторые недостатки этого, хотя.Некоторым людям не нравится эта методология, потому что метод live действительно обладает некоторой производительностью.Они предпочитают делегировать, потому что это ограничивает элементы, которые должны быть проверены на наличие событий.Рассмотрим статью вроде this .Хотя я не помню, какую статью я прочитал, но я предполагаю, что информация очень похожа.

1 голос
/ 29 января 2012

Ваша проблема в том, что когда вы связываетесь с $('#slideButton1'), он не существует в DOM. Решением является привязка к элементу $('#gallerySlider') с использованием метода on. 

$('#gallerySlider').on( 'click', 'div', function( e ){
  console.log( $( this ), $( this ).attr( 'id' ) );
});

Возможно, было бы неплохо дать имена классов вашим элементам div и нацелить их таким образом. 

$('#gallerySlider').on( 'click', '.myClassName', function( e ){ // etc
0 голосов
/ 29 января 2012

Если вы поместите свои обработчики событий в функцию, которая вызывается возвращаемым javascript, у вас все будет в порядке. function () addHandlers {$ ('# slideButton1'). click (function () {}

Затем в конце вашего возвращенного JavaScript: addHandlers ();

0 голосов
/ 29 января 2012

События не передаются, потому что этих элементов еще нет в DOM. Вот почему ваши кнопки не работают. Я не могу не думать, что вы действительно ищете способ загрузки скриптов по требованию. Я могу лично порекомендовать require.js . Это загрузчик модулей JavaScript, который будет делать именно то, что вы пытаетесь сделать. Это довольно просто. Начните здесь. Напишите мне, если вам нужен пуш.

...