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

时间:2015-04-05 19:59:06

标签: javascript jquery events jquery-events

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

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

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

我还能尝试什么?

1 个答案:

答案 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()