javascript - JavaScript 原型(prototype)，获得更多新形式

Question

我在 Symfony 中构建了一个收集表单。我有一个主窗体和一个子窗体。

我可以添加新的主窗体或新的子窗体。它与我的脚本配合得很好。

唯一我不知道为什么的是，当我添加更多主窗体时，它会添加多个子窗体。

例如:我有 3 个主窗体。如果我单击添加最后一个表单，我会得到一个子表单。如果我点击最后一个之前的那个，我会得到 2 个新的子表单，在第一个表单中我会得到 3 个新的子表单。

看起来 - 这也是我的 console.log 测试的结果 - 它在单击函数倍数(如主窗体的数量)时运行。

但我不知道为什么？？？

这是我的脚本:

<script>
    $(document).ready(function() {
        var $wrapper = $('.categories-wrapper');
        $wrapper.on('click', '.js-category-delete', function(e) {
            e.preventDefault();

            $(this).closest('.js-category-item')
                .fadeOut()
                .remove();
        });
        $wrapper.on('click', '.js-category-add', function(e) {
            e.preventDefault();

            // Get the data-prototype explained earlier
            var prototype = $wrapper.data('prototype');

            // get the new index
            var index = $wrapper.data('index');

            // Replace '__name__' in the prototype's HTML to
            // instead be a number based on how many items we have
            var newForm = prototype.replace(/__main__/g, index);

            // increase the index with one for the next item
            $wrapper.data('index', index + 1);

            // Info
            $indexCount = index;
            console.log('Index:' + $indexCount);

            // Display the form in the page before the "new" link
            $(this).before(newForm);

            //

            subcategories();

        });
    });

    //


    function subcategories(){
        $('.subcategories-wrapper').each(function(i) {
            var count = (i+1);

            $(this).addClass("item"+count);

            var $subwrapper = $('.subcategories-wrapper.item'+count);
            $subwrapper.on('click', '.js-subcategory-delete', function(e) {
                e.preventDefault();

                $(this).closest('.js-subcategory-item')
                    .fadeOut()
                    .remove();
            });
            $subwrapper.on('click', '.js-subcategory-add', function(e) {
                e.preventDefault();

                // Get the data-prototype explained earlier
                var prototype = $subwrapper.data('prototype');

                // get the new index
                var index = $subwrapper.data('index');
                console.log(count);

                // Replace '__name__' in the prototype's HTML to
                // instead be a number based on how many items we have
                var subnewForm = prototype.replace(/__sub__/g, index);

                // increase the index with one for the next item
                $subwrapper.data('index', index + 1);

                // Info
                console.log('Mainndex:' + $indexCount);

                // Display the form in the page before the "new" link
                $(this).before(subnewForm);
            });
        });
    }

    $(document).ready(function() {

        subcategories();

    });
</script>

Answer 1

如果其他人在这里运行，这就是我找到的答案。问题在于事件。

在on之前添加一个off()，它运行完美。

$subwrapper.off().on('click', '.js-subcategory-add', function(e) {