如何在innerhtml中传递字符串参数

Question

我正在创建动态 html 基本服务器响应。

例子：

var responseServer = {
name: "al the' too"
}

var htmlView = `<div onclick="info(responseServer.name)"> </div>`; 
//Error: al identifier is not defined. 

var htmlView = `<div onclick="info('responseServer.name')"> </div>`; 
//Error: Uncaught SyntaxError: missing ) after argument list

构建 html 后，我得到以下代码：

 function info(name){ alert(name); }

 <div> <button onclick="info('al al'the ra)"> Test </button> </div>

Answer 1

如果你为这个做一个简单的片段：

 var responseServer = { name: "al the' too" } function info(str){ console.log(str) }

 <div onclick=info(responseServer.name)>Click me!</div>

你可以看到它工作正常。 正如@muasif80 指出的那样，它与info()函数有关！

---

编辑

如果我动态添加带有onclick()事件的 div，它仍然有效：

 $('body').append('<div onclick=info(responseServer.name)>Click me;</div>'): var responseServer = { name. "al the' too" } function info(str){ console.log(str) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

该代码正在运行。 您需要用引号将 function 包含在 onclick 内。 请检查片段

 function streetInfoSinage(name){ alert(name) } var name = "Al Ma'mourah St"; function createDom(){ let responseServer = { name: "al the' too" }; let div = document.createElement("div"); div.textContent = "Hello World " + responseServer.name; div.addEventListener("click", function(){info(responseServer.name)}); document.getElementById("my-dom").appendChild(div); } function info(name){ alert(name); }

 <p style="margin-top:2px;margin-bottom:2px;" onclick='streetInfoSinage("Razeen St")'> Razeen St &nbsp; <i style="font-size: 14px;" class="fas fa-info-circle"></i> </p> <div id="my-dom"> </div> <button onclick="createDom()">call info</div>

我已经更新了代码片段以给出另一个例子

Answer 3

我得到如下解决方法：

 function info(name){ alert(atob(name)); } var sName = "al al'the ra"; var myHtml = document.getElementById("one"); myHtml.insertAdjacentHTML('beforeend', "<button onclick=info(btoa(sName))> Test </button>");

 <div id="one"></div>

这不是实际的构建和运行时环境。 我已经在带有 angular 的 ionic 3 中使用了这个变通方法。