如何附加一个将另一个函数附加到一个尚不存在的元素的函数？

Question

在我的应用程序中，我将函数附加到具有集合类的元素：

$('.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);

上一行不起作用，因为我的集合默认/添加时没有立即获得焦点。我探索了其他解决方案但没有成功（当然我可以从添加集合的代码中重新绑定，但效率不高）。

我还能尝试什么？

Answer 1

您有几个问题要回答，但我认为您的问题可以通过有效地使用 on() 函数中的第二个参数来解决。

您应该将单击事件附加到将包含具有.collection 类的元素的容器元素。

因此，与其选择具有.collection 类的所有元素并将点击事件绑定到.add_button 元素，不如将其绑定一次到所有.collection 元素的父元素并按@987654326 过滤@像这样：

$('.collection:eq(0)').parent().on('click', '.add_button:eq(0)', function(e) {
  // Logic for when button is clicked.
});

当添加.collection 元素之一时，您不必担心调用某个函数来绑定所有事件。

当然，您可以将 $('.collection').parent() 替换为仅针对该容器的选择器，而无需调用 parent()。