從html模板調用外部js文件

Question

我在調用外部js文件的onclick按鈕期間遇到問題，但在onclick函數上未定義錯誤。

<table class="table table-striped table-bordered table-nonfluid" style='width: auto;'>
        <tr>
            <td>Name: </td>
            <td><input type='text' name='ref_name' id='ref_name'></td>
        </tr>
        <tr>
            <td>Description: </td>
            <td><input type='text' name='ref_desc'></td>
        </tr>
        <tr>
            <td colspan='2' align='right'><button type='button' class='btn btn-primary' id="btn_save" onclick="saveMst();">Save</button></td> //this is the line onclick "saveMst()" is not defined when calling external js file.
            <input type='hidden' name='ref_type' value='1'>
        </tr>
    </table>

---

這是我在php中定義的腳本：

$scripts = '<script type="text/javascript" src="js/references.js"></script>';

$smarty->assign('script', $scripts);

---

這是references.js代碼

function saveMst(){
sessionExpired();
if(mstValidate()==true){
    var url= "ref_deparment.php?do=save&save=mst&ref_name="+encodeURIComponent(ref_name)+
             "&ref_desc="+encodeURIComponent(ref_desc);
    alert (url);return false;
    topMsgDisplay('Saving... Please wait...');
    var myAjax = new Ajax.Request(url, { method: 'get', onComplete: function(oR){
        hideOverlay();  
        r = oR.responseText.split('||');
        //alert (oR.responseText);
        if(r[0]==1) {   
            $('btn_save').style.display = 'none';   
            alert('Record had been save sucessfully!');
            getEdit(r[1]);
        }
        else alert(r[1]);
    } });       
}
}

function mstValidate(){
borderpass = '1px solid #ccc';
borderfail = '1px solid #f00';  

shortdesc = $('ref_name').value;
longdesc = $('ref_desc').value;

err_msg = 'You\'ve encounter the below error:\n';
pass=true;

if(shortdesc.length==0){
    pass=false;
    err_msg += '* Name field is left empty.\n';
    $('ref_name').style.border = borderfail;
}else {
    $('ref_name').style.border = borderpass;
}

if(longdesc.length==0){
    pass=false;
    err_msg += '* Description field is left empty.\n';
    $('ref_desc').style.border = borderfail;
}else {
    $('ref_desc').style.border = borderpass;
}

if(pass==false){
    alert(err_msg);
    return false;
}else return true;
}

Answer 1

您可以將事件處理程序從嵌入式html移到您的javascript文件。 您應該將其放在加載DOM時執行的塊中，以確保要附加處理程序的所有元素都存在。

正如您似乎在使用jquery一樣，它看起來像：

$(function(){
    // Document ready
    $('#btn_save').on('click', function() {
        saveMst();
    });
});