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：理想情况下，我想发布生成转发器的原始代码，但我还没有找到它。这个管理主题是基于魔方主题，但它的内部由一个离开的人开发的儿童主题无法弄清楚它在哪里。

我也试过了：

...
$('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（ '文本区域'）隐藏（）; $ 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文档都设置了click事件。

注意事项：#AddMoreButton对应于按钮上设置的ID，所以它看起来像这样。

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

如何使用jQuery

1 个答案: