javascript - 用 DOM 元素替换字符串

Question

我有一个字符串，我想用 DOM 元素替换其中的某些部分:

var mainStr = 'akedf abc dde';

var span = document.createElement('span');
span.id = 'word';
span.innerHTML = '123';
$(span).click(this.touchHandler);

var n = mainStr.replace('abc',span.innerHTML);

var htmlObject = document.createElement('div');
htmlObject.innerHTML = n;


touchHandler:function(e){
    console.log('log something')
},

这段代码不起作用，'abc' 字符串被替换为 '123' 但 touchHandler 不起作用。

代码在Backbone.js中

有什么方法可以做到这一点吗？

Answer 1

不是这样的。将 span 插入文档的方式 (var n = ...) 将 span 视为愚蠢的 HTML，并将其留给浏览器实际创建元素并将其插入 DOM；您自己的 span 元素未插入，因此点击处理程序不起作用。

您可以通过这种方式将处理程序附加到实际元素:

var mainStr = 'akedf abc dde';

var span = document.createElement('span');
span.id = 'word';
span.innerHTML = '123';

var n = mainStr.replace('abc',span.innerHTML);

var htmlObject = document.createElement('div');
htmlObject.innerHTML = n; // the browser creates new span element
$(htmlObject).find("span").click(this.touchHandler); // click handler attached