2012-03-21 2 views
0

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

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); 
       }); 
      } 
     }); 
    }; 
+1

Я не вижу триггер в коде, но вы бы хотели использовать .on() для привязки события click к элементу и убедитесь, что вызов триггера на событие click запущен в обратном вызове добавляемый элемент или какое-то другое время, как только вы уверены, что он существует в DOM. – j08691

+0

Вот что я предположил, что проблема была, но проблема в том, что мне нужно, чтобы она каким-то образом была привязана к вышеуказанной функции. Эта функция вызывается несколько раз, и я пытаюсь использовать триггер для заполнения # display-image div каждый раз, когда загружается новый набор изображений. – user699242

ответ

2

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

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

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

0

Я думаю, что может произойти сбой - это привязка между новым элементом управления и функцией запуска. Попробуйте использовать «живой» в смену «на»

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

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

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

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

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

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

Смежные вопросы