调用innerHTML之后onclick失效问题的解决方法

2014-01-28 15:04:10 作者：

调用innerHTML之后，onclick失效了，这也是在意料之中的，因为innerHTML是以文本形式插入的button，所以无法识别onclick事件

最近再写一个项目，用到了innerHTML，但是呢，发现调用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判断是上线，还是下线~~~我们发现，当点击第一次之后，再点击就无效了~~~~~~

这时候我们可以变相的实现，如下：

复制代码代码如下:

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

您可能感兴趣的文章:

工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终

电脑版 - 返回首页