从HTML模板调用外部js文件

Question

我在onclick按钮调用外部js文件时出现问题，我得到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(); 
    }); 
});