首先介绍一下背景:我正在修改 Drupal 的后端(节点创建表单)以动态地将 html 添加到动态创建的元素中。
所以,这不是一个严格的 Drupal 问题,因为我相信我想知道的是 jQuery 领域而不是 Drupal 领域。
在我的表单中,我有一个转发器(最初我有 1 个文本区域元素,当我单击“添加更多”时,我将有 2 个文本区域元素,依此类推)。
我想要实现的是,当单击“添加更多”按钮时触发一个事件(隐藏元素,添加其他元素)。
所以我写了这个:
(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>
最佳答案
使用...
$("#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>
关于javascript - 如何使用 jQuery 修改动态创建的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33082257/