如何使用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>