如何使用jQuery修改動態創建的內容

Question

首先有點背景：我正在修改Drupal的後端（節點創建表單），以動態地將html添加到動態創建的元素。

所以，這不是嚴格的Drupal問題，因爲我相信我想知道的是在jQuery領域而不是Drupal領域。在我的表單中，我有一箇中繼器（最初我有1個textarea元素，當我點擊'添加更多'時，我將有2個textarea元素，等等）。

我想實現的是，點擊'添加更多'按鈕時觸發事件（隱藏元素，添加其他元素）。

所以我寫了這一點：

(function($) { 
    'use strict'; 

    $(document).ready(function() { 
    var $container = $('#edit-field-updates tbody .draggable td div.form-item'); 
    $container.find('textarea').hide(); 
    var select = '<select><option value="template_1">Template One</option><option value="template_2">Template Two</option><option value="custom">Custom</option></select>'; 
    $container.append(select); 
    $('html').click(function (event) { 
     $container.find('textarea').hide(); 
     $container.append(select); 
    }); 
    }); 

})(jQuery); 

注意，我達到我想要在頁面加載，這是修改的元素是什麼。當用戶點擊「添加更多」添加更多項目時，會出現問題。 PS：理想情況下，我想發佈生成中繼器的原始代碼，但是我仍然沒有找到它。這個管理主題是基於Rubik主題的，但它的一個小孩主題是由一個留下來的人內部開發的，因此無法弄清楚它在哪裏。

我也試過：

... 
$('html').on('click', 'input', function (event) { 
    alert('OI'); 
    $container.find('textarea').hide(); 
    $container.append(select); 
}); 
... 

這確實觸發警報，當我在頁面上點擊第二次（我點擊「添加更多」，然後再次單擊頁面上的任何地方我。因爲我使用'html'而不是元素），但是當我使用特定元素而不是'html'時，它不起作用。

任何想法？

編輯：

我也試過：

$（ '＃編輯現場更新-UND-附加更多的'）點擊（函數（）{$ 容器。 find（'textarea'）。hide（）; $ container.append（select）; }）;

哪個沒有工作。這裏的HTML：

<div class="field-type-text-long field-name-field-updates field-widget-text-textarea form-wrapper" id="edit-field-updates"><div id="field-updates-add-more-wrapper"><div class="form-item"><table id="field-updates-values" class="field-multiple-table sticky-enabled"> 
    <thead><tr><th colspan="2" class="field-label"><label>Updates </label></th><th>Order</th> </tr></thead> 
    <tbody> 
    <tr class="draggable odd"><td class="field-multiple-drag"></td><td><div class="form-item form-type-textarea form-item-field-updates-und-0-value"> 
     <div class="form-textarea-wrapper resizable"><textarea class="text-full form-textarea" name="field_updates[und][0][value]" id="edit-field-updates-und-0-value" cols="60" rows="5"></textarea></div> 
    </div> 
    </td><td class="delta-order"><div class="form-item form-type-select form-item-field-updates-und-0--weight"> 
     <label class="element-invisible" for="edit-field-updates-und-0-weight">Weight for row 1 </label> 
    <select class="field_updates-delta-order form-select" id="edit-field-updates-und-0-weight" name="field_updates[und][0][_weight]"><option value="0" selected="selected">0</option></select> 
    </div> 
    </td> </tr> 
    </tbody> 
    </table> 
    <div class="clearfix"><input class="field-add-more-submit button-add form-submit" type="submit" id="edit-field-updates-und-add-more" name="field_updates_add_more" value="Add another item"></div></div></div></div> 

Answer 1

使用...

$("#AddMoreButton").click(function() { 
    Your Code Here 
}); 

到Click事件只添加到按鈕而不是整個頁面。您可以用document.ready（）函數包裝該按鈕的.click（）函數，以便在頁面加載時在按鈕上設置單擊事件。

$(document).ready(function() { 
    $("#AddMoreButton").click(function() { 
     Your Code Here 
    }); 
}); 

當您設置...

$('html').on('click', 'input', function (event) {... 

它使整個HTML文檔會對它設置的點擊事件。

注意事項：#AddMoreButton對應於按鈕上設置的ID，所以它看起來像這樣。

<button id="AddMoreButton">Add More</button>