DefinaHelper 2016-06-24 17:13 采纳率: 100%
浏览 4211
已采纳

javascript如何替换html内容，而不影响事件

 <div> 用户名：${Name}  <a href="#">处理方式</a></div>

例如上面的代码，a标签上绑定了点击事件，我想用js把 ${Name} 替换成其他的数据。 如果用 innerHtml 来替换的话，a标签的事件就会消失。 如何达到我说的目的呢？

ps：angular 框架实现了这样了可以随意替换内容，但是不知道它是如何实现的。

  • 写回答

6条回答 默认 最新

  • Hover_Z_快跑 2016-06-25 01:15
    关注

    使用 delegate，即事件委派。
    该方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
    简单例子：

     <!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
    var index = 1;
    var liItem = "hello ";
    $(document).ready(function(){
        $("#test").on("click","li",function(event){
            console.log(event.target.innerHTML);
            alert(event.target.innerHTML);
        });
        $("#addLi").on("click",function () {
            // body...
            $("#test").append("<li>"+liItem+index+"</li>");
            index += 1;
        })
    });

    </script>
</head>
<body>
<div>
<button id="addLi">add Item</button>
<lu id="test">
    <li>helllo 0</li>
    </lu>
</div>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题？

问题事件

  • 已采纳回答 12月20日

悬赏问题

  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3