Question

我想製作一個動態HTML，我將在追加前使用jquery追加，如果我將控制HTML一切看起來不錯，但在瀏覽器中追加後整個結構都搞砸了。

這裏是我的HTML：

<script> 
var title = "my title"; 

var toolbar ='<hm_toolbar user="current_user " upp="hm" index="hmIndex "></hm><synapse_toolbar uuid=" hm.hm_pk " my-method="get_linked_facts" ng-if=" flag == true "></synapse_toolbar>'; 

var map_html = '<a onclick="panToMarker(' + lat + ',' + long + ')"> ' + title +'"</a>' + toolbar ; 

var li_html = "$('#" + title + "').append('<li class=\"list-group-item\"><div dynamic=\" " + map_html + " \"></div></li> ')" ; 

var g =title.replace(/ /g,"_");; 

var fn = "function "+ g +"(){ console.log('--working--'); "+ li_html +"; }"; 
    console.log(fn) 
    eval(fn); 
    } 
    </script> 

當上述li_HTML並對其工作表示追加附加的是全亂了

追加HTML代碼的HTML：

<li class="list-group-item"><div pantomarker(49.711083,6.251445)"="" dynamic=" &lt;a onclick="> Test"<hm_toolbar index="hmIndex " upp="hm" user="current_user "></hm_toolbar><synapse_toolbar ng-if=" flag == true " my-method="get_linked_facts" uuid=" hm.hm_pk "></synapse_toolbar> "&gt;</div></li> 

我知道我用引號搞亂了連接，但我無法修復這個bug。

Answer 1

你說的console.log()看起來不錯，但你有eval()之後，這意味着你必須逃避一些報價兩次。

試試這個：

var toolbar ='<hm_toolbar user=\\\'current_user \\\' upp=\\\'hm\\\' index=\\\'hmIndex \\\'></hm><synapse_toolbar uuid=\\\' hm.hm_pk \\\' my-method=\\\'get_linked_facts\\\' ng-if=\\\' flag == true \\\'></synapse_toolbar>'; 

var map_html = '<a onclick=\\\'panToMarker(' + lat + ',' + long + ')\\\'> ' + title +'</a>' + toolbar ;