追加HTML + JavaScript来的元素的字符串导致奇怪的行为

http://jsfiddle.net/PeKdr/追加HTML + JavaScript来的元素的字符串导致奇怪的行为

具有含两个HTML和Javascript JavaScript变量导致在结果窗口一些不协调。这两个按钮中的任何一个都不起作用，其中一个调用appendTheString()，而另一个调用springAnAlert()。

我预计小提琴追加新babby div来的foo DIV，以及脚本会导致拿出按钮的警告框里面按下babby股利。

来源

2013-07-03 ebol4

你的jsfiddle被打破：JavaScript是插在html源代码，并解析了'' js代码里面。这里是正确的版本：http://jsfiddle.net/PeKdr/2/ –

在这里看到它的作品（无包装）：http://jsfiddle.net/PeKdr/3/ –

脚本内部不能有</script>，因为</script>会结束脚本。即使它在引号中。

所以答案是将字符串切成小块，其中没有一个包含整个结束标记。

function append() { 
    var stringToAppend = "<"+"div class='babby'>The Babby Div!<"+ 
     "/div><script>alert('This alert never happens!');<"+"/script>"; 
    $('.foo').append(stringToAppend); 
}

更新小提琴：http://jsfiddle.net/PeKdr/5/

编辑：哦，我看到了同样的解决方案在评论中已经给。但我发誓，我从来没有看到评论，直到我发表了这个答案！

来源

2013-07-03 09:08:51

什么！？为什么任何人都希望它能够解析该标签，即使它在引号中？谢谢！ – ebol4

解析器不知道哪些字符是引号，哪些不是。它也不知道JavaScript评论和类似的东西。实际上，它根本不解析内容;它只知道一个脚本元素以''结尾。 –

有解决方案......一个是将脚本的内容放在一个'<！[CDATA ['block中，就像jsfiddle站点一样。但是，<！[CDATA ['块是XML特性，所以它们不能在HTML中工作，只能在XHTML中工作！人们往往会忘记这一点。 –

这个小提琴可能是你想要的。 http://jsfiddle.net/PeKdr/8/

$("#button").click(function() { 
    $('.foo').append("<div class='babby'>The Babby Div!</div>\<script\>alert(1);\<\/script\>"); 
}); 
window.showAlert = function(){ 
    $('.foo').append("<div class='babby'>The Babby Div!</div>\<script\>alert(2);\<\/script\>"); 
}

来源

2013-07-03 09:36:20 sidneyYi

追加HTML + JavaScript来的元素的字符串导致奇怪的行为

回答

相关问题