如何使用 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”时，它不起作用。

有什么想法吗？

编辑：

我也试过了：

$('#edit-field-updates-und-add-more').click(function() { $container.find('textarea').hide(); $container.append(选择); });

这没有用。这是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 
});

仅将点击事件添加到按钮而不是整个页面。您可以使用 document.ready() 函数包装该按钮 .click() 函数，以便在页面加载时在按钮上设置 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>