Использование .trigger () для динамически создаваемого элемента - PullRequest
Новая
       24

Использование .trigger () для динамически создаваемого элемента

0 голосов
/ 22 марта 2012

Я пытаюсь вызвать событие нажатия на динамически созданном элементе. Я использовал .on () для привязки событий щелчка, но кажется, что триггерный метод срабатывает до того, как элемент создан. Я пытался вызвать щелчок в нескольких местах, но ничего не работает. Любая помощь будет оценена. Я пытаюсь вызвать клик по первому диапазону, который создается с помощью $ ('container: first-child'). Trigger ('click'); 

displayThumbnails = function() {

        $(photoArray).each(function(index) {
            var thumbnailImg = this.SmallImageUrl,
            largeImg = this.LargeImageUrl,
            thumbnailId = 'thumbnail' + index,
            largeImgId = 'image' + index;

            if(index > indexCount) {
                return false;
            } else if (index >= indexStartValue && index <= indexCount) {

                $(thumbContainer).append(
                    '<span class="thumbnail" id="' + thumbnailId + '"><img height="45px" width="60px" src="' + thumbnailImg + '"/></span>'
                );

                $(thumbContainer).on('click', '#' + thumbnailId, function(){
                    $(thumbContainer).find('.active').removeClass('active');
                    $(this).addClass('active');
                    $('#displayed-image').attr('src', largeImg);
                });
            }
        });
    };

Ответы [ 3 ]

2 голосов
/ 06 октября 2012

Месяцы спустя, я возвращаюсь к этому. Ответ IMO в эти дни состоит в том, что запуск щелчка для последующего вызова функции слишком взаимозависим. Если вы пытаетесь вызвать клик, чтобы что-то произошло на вашей странице, вы, вероятно, думаете об этом неправильно. В итоге я переосмыслил это и получил функцию, которая самостоятельно загружала большое изображение. В основном я пытался вызвать щелчок, чтобы загрузить изображение.

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

Кроме того, причина, по которой я никогда не принимал два других ответа, заключается в том, что .on () - это способ привязать обработчики событий в jQuery начиная с 1.7.1.

0 голосов
/ 22 марта 2012

Если элемент создается после вызова .on, то с ним не будет связано событие.

Как упоминалось @AlejoBrz, вы можете попробовать использовать .live , но вы можететакже посмотрите на функцию .delegate , так как она может работать и в зависимости от вашей ситуации.

[править] Просто понял, что .on точно такой же, как и .delegate, когда используется как вы.Итак, если подумать, видя, как вы связываете событие сразу после создания элемента, возможно, вы могли бы просто заменить строку .on на эту: 

$('#' + thumbnailId).bind('click', function () { // the rest of your code here

Я должен отметить, что это решение не очень хорошо масштабируетсяпо мере роста количества миниатюр.

0 голосов
/ 22 марта 2012

Я думаю, что может не получиться связать новый элемент управления с вашей триггерной функцией.Попробуйте использовать "live" вместо "on" 

$(thumbContainer).live('click', ...)
...