为啥不需要的数据被推送到我的阵列中？

Posted 2023-05-09

【中文标题】为啥不需要的数据被推送到我的阵列中？

【英文标题】：Why unwanted data is pushed in my array?为什么不需要的数据被推送到我的阵列中？

【发布时间】：2014-07-13 13:46:39

【问题描述】：

我想创建一个表单字段，其中可以使用“添加”按钮插入多个数据，并在按“确定或提交”后发布表单中的所有数据。

按下“添加”后，数据将被推送到名为 formData.values 的数组中。但是，当我按下“添加”按钮时，行为不稳定。

Its output on console is like:
1st trial -- typing "a" and pressing add button... formData.values = [a]
2nd trial -- typing "b" and pressing add button... formData.values = [a, a, b]
3rd trial -- typing "c" and pressing add button... formData.values = [a, a, b, a, b, c]

我希望推送的值如下：

1st trial --- form.data.values should be [a]
2nd ---                        should be [a,b]
3rd ---                        should be [a,b,c]

这是我的 jQuery 代码：您也可以在 jsfiddle here 中看到它

(function($)
$.fn.multiData = function( options )
    var $this = this; 
    var id; // id of add button
    var defaults =  
                    addMoreButton : true,
                    addCancelButton : true                        
        ;
    var settings = $.extend( , defaults, options );
    var formData;
    var addButton;

    this.on('focusin', ':input', function()
        var $inputName = $(this);
        id = $inputName.data( 'more' );
        addButton = $(id);
        addButton.show();

        // getting value from <input name="value">
        formData.name = $inputName.attr('name');
        console.log(formData.name + ' formData.name' );
    );

    this.on('focusout', ':input', function()
        //id = $(this).data( 'more' );
        //id = '#' + id;
        var focussedBox = $(this);
        var textBoxData = $.trim( $(this).val() );
        if( textBoxData === '' )
            addButton.hide();//$(id).hide();
        
        else
            addButton.on( 'click', function( event )
                event.preventDefault();

               // **THESE 3 LINES** IS WHERE I WANT HELP
                console.log( 'initial ' + textBoxData );
                formData.values.push( textBoxData );
                console.log( 'ln 37 testBoxData=' + textBoxData + ' formData.values=' + formData.values + ' ' + formData.values.length);

                $(this).hide();//$(id).hide(); or addButton.hide() but later wont work dont know why.
                focussedBox.val(''); // clearing the field after adding data.

                formData.show();
                );
            
        );


        formData = 
            name: null,
            values: [],
            show: function()
                $('#result').html( this.values );
            
        ;

        console.log( settings );
        return this; // to enable chaining
    ;

    // form-div is used multiple times so storing it for quick response
    var formDiv = $('#form-div');
    formDiv.removeClass('no-js');

    // checking if javascript is on or not. If off disabled = true
    var disabled = formDiv.hasClass('no-js');
    if( !disabled )
        formDiv.multiData();
    
    else 
        alert( 'javascript is disabled' );
    
(jQuery));

【参考方案1】：

试试这样的

formData.show();
$( this).unbind( "click" );//just add this line

原因：因为每次悬停时都会绑定点击。所以一旦你点击按钮，就会触发许多点击事件。

DEMO

【讨论】：

成功了，但我不明白原因。你能澄清一下吗？

在每次聚焦时都很简单，您将点击事件绑定到按钮。n 次聚焦 n 次绑定事件。所以当点击按钮时，会调用 n 次点击函数。