調用jQuery的。每（）對動態生成的內容

這是我的第一個問題，但我已經發現這個網站非常有幫助的，所以感謝大家。調用jQuery的。每（）對動態生成的內容

所以這就是問題所在。我有一堆動態生成的div與textareas，我想迭代。在這裏，此功能適用於靜態測試的div，我把在，但不能在動態創建的。

$jQ('#upload_images_button').on('click', function() { 
    var caption_list = []; 

    $jQ('textarea.upload_image_caption').each(

    function() { 
     caption_list.push($jQ(this).val()); 
     document.write($jQ(this).val()); 
    }); 
});

而這裏的每個這些div的HTML：

<div class="upload_image_temp_wrapper">         
    <div class="upload_wrapper"> 
     <img src="/images/test/test.jpg" /> 

     <div class="temp_image_hover_menu"> 
      <input type="checkbox" checked="checked" /> 
     </div> 
    </div> 
    <div class="upload_image_caption_wrapper"> 
     <textarea class="upload_image_caption" type="text" placeholder="Add a description..."></textarea> 
    </div> 
</div>

編輯

天哪，我覺得自己像個白癡。

我回頭看了看這是產生新的div劇本，看到我忘了指定的textareas類...

無論如何，感謝所有幫助。欣賞所有快速答案！

來源

2012-06-22 Jazy48

沒有意義，每次單擊按鈕時都會提取新的textareas列表。應該是工作 –

當你運行JavaScript代碼？如果您在動態創建的元素存在之前運行它，它將不適用於它們。 _編輯：_我可能會將電線穿過這裏，如果我走錯了路，請糾正我！ – Stecman

如何添加新元素？也許類是不正確的（或者不以其他方式匹配選擇）？是否選擇匹配，如果「手動」看螢火蟲（或者類似的環境）？ – 2012-06-22 04:04:53

的代碼工作正常。你的錯誤在別的地方。例如：http://jsfiddle.net/Buaja/

HTML

<button id="upload_images_button">Upload</button> 
<button id="add-div">Add Div</button> 

<div class="upload_image_temp_wrapper">       
    <div class="upload_wrapper"> 
     <img src="/images/test/test.jpg" /> 

     <div class="temp_image_hover_menu"> 
      <input type="checkbox" checked="checked" /> 
     </div> 
    </div> 
    <div class="upload_image_caption_wrapper"> 
     <textarea class="upload_image_caption" type="text" placeholder="Add a description..."></textarea> 
    </div> 
</div>

$jQ('#upload_images_button').on('click', 
    function(){ 
     var caption_list = []; 

     $jQ('textarea.upload_image_caption').each(
      function(){ 
       caption_list.push($jQ(this).val()); 
       console.log($jQ(this).val()); 
      });  
    } 
); 

// Add divs dynamically 
$jQ('#add-div').on('click', function() { 
    $jQ(document.body).append($jQ($jQ(".upload_image_temp_wrapper")[0]).clone()); 
});

注意

不要使用文件撰寫，如果在頁面加載後調用，將覆蓋文檔中的所有內容

來源

2012-06-22 04:14:53

@ Jazy48解釋你的代碼有什麼問題將會很好 –

添加它，感謝所有的幫助！ – Jazy48

像你這樣調用.on()不會將事件綁定爲活動事件（因爲可選的選擇器參數缺失），這意味着它只會綁定到執行時存在的元素。如果你改變你打電話.on()的方式，特異性結合點擊到body相反，你可以改變事件是住在#upload_images_button按鈕：

$jQ('body').on('click', '#upload_images_button', function() {});

而且，我不知道，如果你有多#upload_images_button按鈕，您的網頁或不上，但要記住的ID必須是唯一的，所以如果你有這些元素的多，而不是使用一個ID類。

來源

2012-06-22 04:00:10

旁邊的複選標記來解決問題。請參閱我的評論，爲什麼您需要使用'$ .on'？處理程序在按鈕本身，我很確定錯誤是別的 –

他沒有指定*他動態添加哪些元素。其餘代碼都很好，這讓我認爲按鈕是他動態添加的元素。 –

他做了，他說在問題中的HTML是動態生成的div –

調用jQuery的。每（）對動態生成的內容

回答

相關問題