调用innerHTML之后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>

赞 (0)

相关推荐

  • js innerHTML 改变div内容的方法

    改变文字innerHTML每个HTML元素具有InnerHtml属性定义的HTML代码和文字之间发生的元素的开幕式和闭幕式标记.通过改变一个元素的innerHTML后,一些用户交互,您可以更互动网页.但是,使用innerHTML需要一些准备,如果你希望能够利用它轻松,可靠.首先,你必须给予部分要更改身份证.与标识到位,你将能够使用getElementById功能,适用于所有的浏览器.在您认为建立您现在就可以操纵文字的要素.要开始了,让我们尝试改变文字一个大胆的标记.下面我们来看一个用js的inn

  • innerHTML动态添加html代码和脚本兼容多个浏览器

    症状:给某个元素的 innerHTML 设置值时,如果提供的 HTML 代码中包含js脚本,很多时候这些脚本无效,或者在某种浏览器上有效,但在其它浏览器上无效. 原因:不同浏览器对插入 innerHTML 中的脚本有不同的处理方法.经过实践,归纳如下: 对于IE,首先, script 标签必须带 defer 属性,其次,在插入时刻,innerHTML 的所属节点必须在 DOM 树中. 对于 Firefox 和Opera,在插入时刻,innerHTML 的所属节点不可以在 DOM 树中. 根据上面

  • javascript innerHTML、outerHTML、innerText、outerText的区别

    javascript innerHTML、outerHTML、innerText、outerText的区别

    1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 2.示例 <html> <head> <title>Demo</title> <style><!-- body {font-family:"宋体";

  • IE6-IE9不支持table.innerHTML的解决方法分享

    测试代码: 复制代码 代码如下: <table id="test"> </table> <script> var oTable=document.getElementById("test"); oTable.innerHTML="<tr><td>innerHTML</td></tr>"; </script> 上述代码在IE6-9中无效,直接报错: IE

  • js使用for循环与innerHTML获取选中tr下td值

    function getParentEl (el, tagName) { if (!el) return el; do { el = el.parentNode; } while(el && el.tagName !== tagName); return el; } function temp(){ //得到选中row的value值 var temp=document.getElementsByName('id'); for(var i=0;i<temp.length;i++){ i

  • innerHTML与jquery里的html()区别介绍

    看个示例: 复制代码 代码如下: var tbody=document.createElement('tbody'); tbody.innerHTML='<tr><td>IE下tbody的innerHTML是只读的</td></tr>'; //在IE下报错,目标对象错误 现在用jquery的html试试, 复制代码 代码如下: $(tbody).html('<tr><td>IE下tbody的innerHTML是只读的</td&g

  • innerhtml用法 innertext用法 以及innerHTML与innertext的区别

    test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是"<span style="color:red">test1</span> test2 ". test.innerText: 从起始位置到终止位置的内容, 但它去除Html标签 上例中的text.innerTest的值也就是"test1 test2", 其中span标签去除了. te

  • IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值,重现代码如下 复制代码 代码如下: <!DOCTYPE html><html>    <head>        <meta charset="utf-8"/>        <title>IE6-IE9中tbody的innerHTML不能复制bug</title>    </head>    <body style=&quo

  • 放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解

    放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解

    在Ajax横道的今天,我们在页面交互上有了更高的要求,动态生成HTML毫无疑问是其中的一种.动态生成HTML的方式多种多样,其核心不外乎在前段(JS)或者后端(C#/PHP-)将数据组装成我们想要的模版,最终通过一定的方法输出给用户(innerHTML.documentWrite等方式). 缺点 1)拼接字符串的过程容易出错,常常忘了'/">等匹配的符号. 2)修改前台模版的同时容易遗忘同步更改动态生成的模版. 3)拼接字符串不直观和美观,不利于查找错误,例如:数据中如果存在HTML内容,

  • innerHTML中标签可以换行的方法汇总

    在用innerHTML生成结构时,为了看起来结构明快,可以在每行的末尾加一个反斜线\,即可保持html原结构,而不至于将标签都挤在一块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>innerHTML中标签可以换行的方法</title> </head> <body> <sc

随机推荐