触发事件上的返回键会意外刷新页面并给出未定义的错误 - JavaScript

Question

当我单击字段，输入文本，然后按键盘上的回车键时，它会触发initializeTable函数，该函数刷新页面并给出错误form[0]未定义。但是，当我使用更改事件来更改下拉选择时，它不会导致这种意外行为。所以我不确定为什么在文本字段中按回车键会导致这一切。感谢您的回复。

<script>
(function($){

var listview = $('#listview');

var lists = (function(){
    var criteria = {
        dropFilter: {
            insert: function(value){
                if(value)

                    return {"filter" : value}; 
            },
            msg: "Filtering..."
        },
        searchFilter: {
            insert: function(value){
                if(value)
                    return {"search" : value}
            },
            msg: "Searching..."
        }

    }
    return { 
         create: function(component){
            var component = component.href.substring(component.href.lastIndexOf('#') + 1); //sites
            return component;
        },
         setDefaults: function(component){
            var parameter = {};
            switch(component){
                case "sites":
                    parameter = {
                        'url': 'sites',                         
                        'order': 'site_num',
                        'per_page': '20'
                    }
            }
            return parameter;
        },
        getCriteria: function(criterion){
            return criteria[criterion];    

        },
        addCriteria: function(criterion, method){
            criteria[criterion] = method;   
        }
    }
})();  

var Form = function(form){
    var fields = [];
    $(form[0].elements).each(function(){  
        var field = $(this);  
        if(typeof field.attr('alter-data') !== 'undefined') fields.push(new Field(field));  
    })  
}

Form.prototype = {
    initiate: function(){
        for(field in this.fields){
            this.fields[field].calculate();  
        }
    },
     isCalculable: function(){  
        for(field in this.fields){  
                if(!this.fields[field].alterData){ 
                return false; 
            }
        } 
        return true;  
    } 
}

var Field = function(field){ 
    this.field = field;  
    this.alterData = true;  
    this.component = {'url' : window.location.hash.substring(window.location.hash.indexOf('#') + 1)};
    this.attach("change");  
    this.attach("keypress");  
}

Field.prototype = { 
    attach: function(event){
        var obj = this; //our Field object
        if(event == "change"){
            obj.field.bind("change", function(){ 
                return obj.calculate();
            })
        }
        if(event == "keypress"){
            obj.field.bind("keypress", function(e){  
                var code = (e.keyCode ? e.keyCode : e.which);
                if(code == 13){ 
                    return obj.calculate();
                }
            })
        }
    },
    calculate: function(){
        var obj = this, 
            field = obj.field,  
            component = obj.component,
            msgClass = "msgClass",
            msgList = $(document.createElement("ul")).addClass("msgClass"),  
            types = field.attr("alter-data").split(" "),  
            container = field.parent(),  
            messages = [];

        field.next(".msgClass").remove();  
        for(var type in types){  
            var criterion = lists.getCriteria(types[type]);  
            if(field.val()){ 
                var result = criterion.insert(field.val()); 

                container.addClass("waitingMsg");  
                messages.push(criterion.msg);  

                obj.alterData = true;  

                initializeTable(component, result);  

            }
            else { 
                return false; 
                obj.alterData = false; 
            }
        }
        if(messages.length){
            for(msg in messages){
                msgList.append("<li>" + messages[msg] + "</li");  
            }
        }
        else{
            msgList.remove();  
        }
    }
}

$('#dashboard a').click(function(){
    var currentComponent = lists.create(this);
    var defaults = lists.setDefaults(currentComponent);
    initializeTable(defaults);
});

var initializeTable = function(defaults, custom){

    var custom = custom || {};

    var query_string = $.extend(defaults, custom);

    var params = [];
    $.each(query_string, function(key,value){
        params += key + '=' + value + "&"; 
    })
    var url = params.substring(params.indexOf("url")+4,9);
    params = params.substring(params.indexOf("&")+1).replace(params.substring(params.lastIndexOf("&")),"");

    $.ajax({
        type: 'GET',
        url: '/' + url,
        data: params,
        dataType: 'html',
        error: function(){},
        beforeSend: function(){},
        complete: function() {},
        success: function(response) { 
            listview.html(response);

                var form = $('form');
                form.calculation(); 


        }
    })


}

$.extend($.fn, {   
    calculation: function(){

            var formReady = new Form($(this));

            if(!formReady.isCalculable){
                return false; 
            }

    }
})

 })(jQuery)
 </script>

实际的问题是这样的，而不是遍历整个脚本：

if(event == "keypress"){
            obj.field.bind("keypress", function(e){ 
                var code = (e.keyCode ? e.keyCode : e.which);
                if(code == 13){ 
                    return obj.calculate();
                }
            })
        }
    }

Answer 1

最后，我让它这样工作：

            if(event == "keypress"){
            obj.field.bind("keypress", function(e){ 
                var code = (e.keyCode ? e.keyCode : e.which);
                if(code == 13){ 
                    e.preventDefault();
                    return obj.calculate();
                }
            })
        }
    },

因此，我们首先防止默认，然后执行我们的自定义函数。