最近再寫一個項目，用到了innerHTML，但是呢，發(fā)現調用innerHTML之后，onclick失效了，這也是在意料之中的，因為innerHTML是以文本形式插入的button，所以無法識別onclick事件，所我們只有另找出路了，我們不能直接實現，但是可以間接實現，下面就舉個例子：

例子一：該例子是無法實現的onclick的

復制代碼代碼如下:

 
<html> 
<head> 
<script defer> 
function insCell(th) 

var name=th.name; 
var id=th.id; 
if(name=="no"){ 
id.innerHTML="<input type='button' onclick='insCall(this)' value='上線' 
name='no' id='1'>"; 


}else{ 
id.innerHTML="<input type='button' onclick='insCall(this)' value='下線' 
name='yes' id='1'>"; 





} 
</script> 
</head> 
<body> 


<br /> 
<span id="msg"> 
<input type="button" onclick="insCall(this)" value="下線" name="yes" id="1"> 
</span> 
</body> 
</html> 

上面的例子是，根據button的name判斷是上線，還是下線~~~我們發(fā)現，當點擊第一次之后，再點擊就無效了~~~~~~

這時候我們可以變相的實現，如下：

復制代碼代碼如下:

 
<html> 
<head> 
<script defer> 
function insCell(th) 
{ 
var name=th.name; 
var id=th.id; 
alert(name+"--"+id); 
var span=document.getElementById(id); 
if(name=="no"){ 

span.innerHTML="<input type='button' value='下線'>"; 
span.name="yes"; 
}else{ 
span.innerHTML="<input type='button' value='上線'>"; 
span.name="no"; 
} 
} 
</script> 
</head> 
<body> 


<br /> 
<span id="1" onclick="insCell(this)" name="no"> 
<input type="button" value="上線"> 
</span> 
</body> 
</html> 

您可能感興趣的文章:

javaScript刪除對象屬性的幾種方法總結
這篇文章主要給大家介紹了關于javaScript刪除對象屬性的幾種方法的相關資料,它們在不同場景下有不同的應用,需要根據實際情況選擇最合適的刪除方法,文中通過實例代碼介紹的非常詳細,下面需要的朋友可以參考下
2023-06-06
JS this關鍵字在ajax中使用出現問題解決方案
這篇文章主要介紹了JS this關鍵字在ajax中使用出現問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-07-07
open 動態(tài)修改img的onclick事件示例代碼
動態(tài)修改img的onclick事件，使用open也可輕松做到，下面有個不錯的示例，需要的朋友可以參考下
2013-11-11
JavaScrpt的面向對象全面解析
javascript面向對象知識很廣泛，想深入理解需要花費一些時間，本文給大家介紹了js面向對象的創(chuàng)建及相關屬性介紹，感興趣的小伙伴一起學習吧
2017-05-05
JS替換文本域內的回車示例
這篇文章主要介紹了JS如何替換文本域內的回車,需要的朋友可以參考下
2014-02-02
JavaScript實現簡易的水印覆蓋功能
本文將簡單實現一個覆蓋水印的小功能，水印一般都是添加在圖片上，然后直接加載處理過的圖片url即可，這里并沒有修改圖片，而是直接的在待添加水印的?dom?上添加一個?canvas?蒙版，需要的可以參考一下
2022-12-12
js面向對象方式實現拖拽效果
這篇文章主要為大家詳細介紹了js面向對象方式實現拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-03-03
深入理解JS DOM事件機制
下面小編就為大家?guī)硪黄钊肜斫釰S DOM事件機制。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
javascript動態(tài)創(chuàng)建表格及添加數據實例詳解
這篇文章主要介紹了javascript動態(tài)創(chuàng)建表格及添加數據,以實例形式分析了javascript動態(tài)創(chuàng)建表格的常用方法,包括不兼容IE6與兼容IE6的實現方法,非常具有實用價值,需要的朋友可以參考下
2015-05-05
Javascript節(jié)點關系實例分析
這篇文章主要介紹了Javascript節(jié)點關系,實例分析了javascript操作父子節(jié)點及兄弟節(jié)點的相關技巧,需要的朋友可以參考下
2015-05-05