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视为dumb 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

Answer 2

您正在将事件附加到htmlObject中不存在的其他元素。您需要将事件附加到span内的htmlObject元素，因为innerHTML不会复制事件侦听器
当您使用innerHTML时，实际上并未获得"<span>123</span>"，而是获得"123"。您可以使用span.outerHTML或仅使用字符串var spanString = "<span>123</span>";和var n = mainStr.replace('abc',spanString);

example

用DOM元素替换字符串

2 个答案: