在動態創建的元素上使用.trigger（）

我試圖在動態創建的元素上觸發單擊事件。我已經使用.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); 
       }); 
      } 
     }); 
    };

來源

2012-03-21 user699242

我在代碼中看不到觸發器，但是您希望使用.on（）將click事件綁定到您的元素，並確保觸發對click事件的調用是在觸發器的回調中觸發的元素被添加或其他時間一旦你確定它存在於DOM中。 – j08691 2012-03-21 20:19:19

這是我認爲的問題是，但問題是，我需要它以某種方式附加到上述功能。這個函數被多次調用，並且我試圖在每次加載一組新圖像時使用觸發器來填充＃display-image div。 – user699242 2012-03-21 20:36:09

幾個月後，我正在重溫這個。 IMO現在的答案是觸發點擊以使後續函數調用過於相互依賴。如果您試圖觸發點擊以在頁面上發生某些事情，那麼您可能正在考慮錯誤的方式。我結束了重新思考，並有一個函數來處理自己加載大圖像。基本上，我試圖觸發點擊加載圖像。通過反思這個過程，我得到了更簡潔的代碼 - 一切工作都獨立處理一個小函數。

此外，我從來沒有接受過其他兩個答案的原因是.on（）是從1.7.1開始綁定事件處理程序的方式。

來源

2012-10-05 21:44:32 user699242

我認爲可能失敗的是新控件和觸發器函數之間的綁定。嘗試使用「live」替代「on」

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

來源

2012-03-21 20:20:43

如果元素是在.on被調用後創建的，那麼它將不會綁定事件。

作爲@AlejoBrz提到你可以嘗試使用.live，但你也可以看看.delegate函數，因爲它也可以根據你的情況工作。

剛剛意識到.on和.delegate在使用時完全一樣。因此，轉念一想看到，因爲你是剛剛創建的元素結合後的事件也許你可以只更換與此有關。上線：

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

我要指出，這個解決方案將不會規模非常好作爲縮略圖數量增長。

來源

2012-03-21 20:57:13 James

在動態創建的元素上使用.trigger（）

回答

相關問題