使用JavaScript的HTML注入

StackOverflow https://stackoverflow.com/questions/1932131

  •  20-09-2019
  •  | 
  •  

题

我通过JavaScript来的HTML以下行注入到一个文档：

<button type='button'>btnName </button>

在除了这一点，我必须一个onclick注册到要调用的功能按钮期望一个ARG说'arg'这样的JavaScript看起来像这样：

var html = "<button type='button' onclick='+ fnName +
    "(the param shld go here)'>" + btnName + "</button>"

我如何实现这一目标？ 一个显而易见的解决方案是一个ID分配给按钮，再后来就注册一个点击功能一旦HTML被追加到文档中。但我不想因为有太多的按钮来做到这一点。是否有你能想到的另一种选择。

<强>增加： 函数名是动态的，而云在'arg'也是动态的。如果在所有需要的ID必须被自动生成。

**

  

我已经得到了解决，请参见下面的

**

有帮助吗？

解决方案 6

Ive得到了解决方案： - 

var html = "<button type='button' onclick='"+ fnName +"("+ JSON.stringify(data) +")'>"+ btnName + "</button>"

其他提示

我建议的jquery。

像

的东西 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script>
$(document).append(
  $("input")
  .attr("type", "button")
  .click(function(){
    doSomething()
  ))
);
</script>

您应该避免使用onclick作为HTML属性。取而代之的是，通过DOM接口编程创建按钮并附加事件作为一个属性。

var button       = document.createElement("button");
button.type      = "button";
button.innerHTML = btnName;
button.onclick   = function() {
    window[fnName](data);
};

// Insert the button into whatever container node you are populating
someContainerNode.appendChild(button);

或者因为这jQuery的方式是其中所述带车皮打算：

$("<button type='button'>" + btnName + "</button>").click(function() {
    window[fnName](data);
}).appendTo(someContainerNode);

此外，因为你没有设置onclick处理程序作为一个字符串，你将不再需要你的函数参数data转换成JSON字符串，这将提高性能。

可以使用文件撰写该变量。 VAR = HTML文件撰写（ '' + btnName + ''）。请更正单引号和双引号。我不知道这是对你有用与否

如果你不希望结合的事件到每个单独的按钮，就可以将一个事件绑定到所有这些按钮中的一个父（例如，父DIV保持例如按钮），然后使用事件冒泡来实现类似的影响。

e.g。

<div id="parent">   
   <button id="b0">text</button>
   <button id="b1">text</button>
   <button id="b2">text</button>
   <button id="b3">text</button>
   <button id="b4">text</button>
   <button id="b5">text</button>
</div>
<script>
   $("#parent").click(function(e){
       if ($(e.target).attr("id") === "b0") {
          // do b0's stuff
       } else if ($(e.target).attr("id") === "b1") {
          //do b1's stuff 
       } //etc 
   });
</script>

另一种方式来做到这一点是使用 jQuery的现场活动 - 它们基本上是做什么的我上面已经写（更优雅的疗程）。至于参数，你如何获得在首位的论据？不知道，我真的不能告诉你前进的最好方式。

既然你不想分配一个onclick方法通常的方式，关于倒过来将它们全部调用函数的唯一标识号。该函数将具有一个具有参数的二维阵列，这是假设每按钮调用用不同的参数相同的功能。

编辑：我可能误解了，这里是一些代码的不可以使用jQuery，我在最近的一个项目中使用

。 
for(var place = 0; place < 5; place++)
        {
            if(document.getElementById('title_'+ place).addEventListener)//this is for compatablity
                document.getElementById('title_'+ place).addEventListener('click', function(e){/*some code*/});
            else if(document.getElementById('title_'+ place).attachEvent)
                document.getElementById('title_'+ place).attachEvent('onclick',  function(e){/*some code*/});
            else
                document.getElementById('title_'+ place) = function(e){/*some code*/};
        }

在代码添加onClick事件到5个物体，并且由于它会检查该方法在当前的浏览器工作的，它支持在主浏览器（据我已经测试）。

我拿出一些代码的可读性，但是这仅仅是在将被调用的函数的代码。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top