調(diào)用innerHTML之后onclick失效問題的解決方法

更新時間：2014年01月28日 15:04:10 作者：

調(diào)用innerHTML之后，onclick失效了，這也是在意料之中的，因為innerHTML是以文本形式插入的button，所以無法識別onclick事件

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

例子一：該例子是無法實現(xiàn)的onclick的

復(fù)制代碼代碼如下:

 
<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> 

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

這時候我們可以變相的實現(xiàn)，如下：

復(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> 

您可能感興趣的文章:

相關(guān)文章

代碼整潔之道(重構(gòu))
這篇文章主要介紹了代碼整潔之道(重構(gòu))，不管對于何種語言，重構(gòu)都是軟件開發(fā)過程中不可或缺的一部分，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10
JavaScript數(shù)組前面插入元素的方法
這篇文章主要介紹了JavaScript數(shù)組前面插入元素的方法,涉及javascript中unshift方法的使用技巧,非常具有實用價值,需要的朋友可以參考下
2015-04-04
簡單的分頁代碼js實現(xiàn)
簡單的分頁代碼js實現(xiàn)，分享給大家，感興趣的小伙伴們可以參考一下
2016-05-05
基于javascript html5實現(xiàn)多文件上傳
這篇文章主要為大家詳細(xì)介紹了基于javascript html5實現(xiàn)多文件上傳的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-03-03
可插入圖片的TEXT文本框
這篇文章主要介紹了可插入圖片的TEXT文本框，有需要的朋友可以參考一下
2013-12-12
更快的異步執(zhí)行(setTimeout多瀏覽器)
如果要異步執(zhí)行一個函數(shù)，我們最先想到的方法肯定會是setTimeout,這里簡單介紹下，方便需要的朋友
2014-08-08
JavaScript中的console.dir()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.dir()函數(shù)介紹,console.dir主要用來dump某些對象的詳細(xì)信息,需要的朋友可以參考下
2014-12-12
關(guān)于JavaScript中的數(shù)組方法和循環(huán)
這篇文章主要介紹了關(guān)于JavaScript中的數(shù)組方法和循環(huán)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
JavaScript設(shè)計模式之策略模式實例
這篇文章主要介紹了JavaScript設(shè)計模式之策略模式實例,本文分析了Jquery源碼并給出了自己的實現(xiàn),需要的朋友可以參考下
2014-10-10
通過js為元素添加多項樣式,瀏覽器全兼容寫法
這篇文章主要介紹了通過js為元素添加多項樣式,瀏覽器全兼容寫法,需要的朋友可以參考下
2014-08-08