在我的应用程序中,我将函数附加到具有集合类的元素:
$('.collection').each(initiateCollection);
function initiateCollection()
{
var $container = $(this).children('div:first-child');
if (!$container.data('is_collection'))
{
var $addButton = $container.children('.add_button').eq(0);
$addButton.on('click', function(e) {
addElement($container,index);
count++;
index++;
showHeaders($container, count);
correctSelect2Width($(this));
e.preventDefault();
return false;
});
var count = $container.find('.child_collection').length;
var index = $container.find('.child_collection').length;
console.log(count);
if (count == 0)
{
var $headers = $container.find('.headers').eq(0);
var $headerPrototype = $($container.attr('data-header'));
$headers.html($headerPrototype);
}
$container.on('click','.fmu_delete_button', function(e){
e.preventDefault();
var $row = $(this).closest('.row_to_delete');
$row.next('.sibling_row_to_delete').remove();
$row.next('.sibling_row_to_delete_2').remove();
$row.remove();
count--;
showHeaders($container, count);
});
showHeaders($container, count);
$container.data('is_collection', true);
}
}
问题是某些集合尚未加载但我仍需要它们表现相同。我无法将该功能附加到单击,并且焦点不能直接起作用:
$('body').on('focus', '.collection', initiateCollection);
上一行不起作用,因为我的集合在添加时默认/立即没有获得焦点。我已经探索了其他解决方案但没有成功(当然我可以从我添加集合的代码中重新绑定但是效率不高)。
我还能尝试什么?
答案 0 :(得分:0)
您有几个问题需要回答,但我认为可以通过有效使用on()
函数中的第二个参数来解决您的问题。
您应该将click事件附加到包含.collection
类元素的容器元素。
因此,不是选择具有.collection
类的所有元素并将click事件绑定到.add_button
元素,而是将其绑定到所有.collection
的父元素。元素和按.add_button
过滤如下:
$('.collection:eq(0)').parent().on('click', '.add_button:eq(0)', function(e) {
// Logic for when button is clicked.
});
当添加其中一个.collection
元素时,您不必担心调用某些函数来绑定所有事件。
当然,您可以使用仅定位该容器的选择器替换$('.collection').parent()
,而无需调用parent()
。