javascript 函数说它不存在，当它存在时

Question

我试图调用一个 JavaScript 函数，然后将单击的按钮的值传递给该函数，但即使该函数确实存在，它也说不存在，我不确定为什么。基本上，我需要在单击开机按钮时调用 powerOn() 函数，然后返回状态消息。我需要知道的是为什么它不会调用该函数，这样我就可以确保得到基本响应。

此外，当我按照http://github.hubspot.com/sortable/api/options/上的文档进行操作时，我也不完全确定为什么sortable会返回控制台错误。 :

ReferenceError: Sortable is not defined vmstatus:123
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead. jquery-1.10.2.js:5375
TypeError: powerOn is not a function

代码:

<script type="text/javascript">
        $(document).ready(function() {
            $("#submit").click(function() {
                    $.ajax({
                        url : "/vmstatus/", 
                        type : "POST",
                        dataType: "json", 
                        data : {
                            selected_customer : $("#selected_customer").val(),
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success : function(json) {
                                $('#table-repeat-data').remove();
                                setInterval(update, 1000);  
                                var on = '<img src={% static "icons/on2.jpg" %}>'
                                var off = '<img src={% static "icons/off.jpg" %}>'
                                $('#table_name').append("<table class='table' id='table-repeat-data' data-sortable><thead><tr><th align='center' data-toggle='tooltip' data-placement='left' title=''> <b>VM Name</b></th><th align='center' data-toggle='tooltip' data-placement='left' title=''><b>PowerState </b> </th><th align='center' data-toggle='tooltip' data-placement='left' title='N'><b>Commands </b></th></tr></thead><tbody>");

                                for (var index = 0; index < json.vmlist.length; index++) {
                                    var powerOn = '<button type="button" name="PowerOn" id="powerOn" onClick="powerOn()" class="btn btn-primary" value="' + json.vmlist[index][2] + '">Power On</button>';
                                    var powerOff = '<button type="button" name="PowerOff" id="powerOff" class="btn btn-danger" value="' + json.vmlist[index][2] + '">Power Off</button>';
                                    var resetVM = '<button type="button" name="ResetVM"  id="ResetVM" class="btn btn-warning" value="' + json.vmlist[index][2] + '">ResetVM</button>';
                                    if(json.vmlist[index][1] == 'poweredOn'){
                                        $('#table-repeat-data').append ('<tr><td id="' + json.vmlist[index][0] + '">' + json.vmlist[index][0] + '</td><td id="' + json.vmlist[index][2] + '1">' + on + '</td><td id="' + json.vmlist[index][2] + '">' + powerOn + ' ' + powerOff + ' ' + resetVM + '</td></tr>');
                                    }else{
                                        $('#table-repeat-data').append ('<tr><td id="' + json.vmlist[index][0] + '">' + json.vmlist[index][0] + '</td><td id="' + json.vmlist[index][2] + '1">' + off + '</td><td id="' + json.vmlist[index][2] + '">' + powerOn + ' ' + powerOff + ' ' + resetVM + '</td></tr>');
                                    }
                                }


                            },
                            error : function(xhr,errmsg,err) {
                                console.log(xhr.status + ": " + xhr.responseText);
                            }
                    });
                    return false;
            });              
        });

function update(){
                    $.ajax({
                        url : "/vmstatus/", 
                        type : "POST",
                        dataType: "json", 
                        data : {
                            selected_customer : $("#selected_customer").val(),
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success : function(json) {
                                var on = '<img src={% static "icons/on2.jpg" %}>'
                                var off = '<img src={% static "icons/off.jpg" %}>'
                                for (var index = 0; index < json.vmlist.length; index++) {
                                    var powerOn = '<button type="button" name="PowerOn" id="powerOn" onClick="powerOn()" class="btn btn-primary" value="' + json.vmlist[index][2] + '">Power On</button>';
                                    var powerOff = '<button type="button" name="PowerOff" id="powerOff" class="btn btn-danger" value="' + json.vmlist[index][2] + '">Power Off</button>';
                                    var resetVM = '<button type="button" name="ResetVM" id="ResetVM" class="btn btn-warning" value="' + json.vmlist[index][2] + '">ResetVM</button>';
                                    if(json.vmlist[index][1] == 'poweredOn'){           
                                        var get_element_id = json.vmlist[index][2] + '1';
                                        document.getElementById(json.vmlist[index][0]).innerHTML = json.vmlist[index][0];
                                        document.getElementById(get_element_id).innerHTML = on;
                                        document.getElementById(json.vmlist[index][2]).innerHTML = powerOn + ' ' + powerOff + ' ' + resetVM;
                                    }else{
                                        var get_element_id = json.vmlist[index][2] + '1';                                   
                                        document.getElementById(json.vmlist[index][0]).innerHTML = json.vmlist[index][0];
                                        document.getElementById(get_element_id).innerHTML = off;
                                        document.getElementById(json.vmlist[index][2]).innerHTML = powerOn + ' ' + powerOff + ' ' + resetVM;
                                    }
                                }

                            },
                            error : function(xhr,errmsg,err) {
                                console.log('Bad');
                                console.log(xhr.status + ": " + xhr.responseText);
                            }
                    });

}        

function powerOn() {
                    console.log('powerOn');
                    console.log(this.val());
                    $.ajax({
                        url : "/vmstatus/", 
                        type : "POST",
                        dataType: "json", 
                        data : {
                            selected_vm : $(this).val(),
                            username : '{{user_name}}',
                            ip_address: '{{ip}}',
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success : function(json) {
                                console.log(json.server_response);
                            },
                            error : function(xhr,errmsg,err) {
                                console.log('Bad');
                                console.log(xhr.status + ": " + xhr.responseText);
                            }
                    });
   }

Sortable.init();
var dataTable;
dataTable = document.querySelector('#table-repeat-data');
Sortable.initTable(dataTable);  

</script>

Answer 1

尝试更改函数的名称，或更改同名变量的名称。由于范围的原因，可能会混淆您真正指的是哪一个。

var powerOn = '<button type="button" name="PowerOn" id="powerOn" onClick="powerOn()" class="btn btn-primary" value="' + json.vmlist[index][2] + '">Power On</button>';

function powerOn() {...}

哪个是powerOn？他们都是。您的函数稍后可能会被重写为字符串值，然后尝试像函数一样调用它就不再有效。