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 ？ 他們倆都是。 您的函數稍后可能會被覆蓋為字符串值，然后像調用函數一樣調用它不再有效。