Question

我必须通过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。

**

我已经找到了解决方案，请参阅下面的

**

Answer 1

我推荐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>

Answer 2

您应该避免使用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字符串，这将提高性能。

Answer 3

由于您不希望以通常的方式分配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事件添加到五个对象，并且因为它检查当前浏览器中哪个方法有效，所以它支持主浏览器（据我测试过）。

我为了可读性而取出了一些代码，但这只是要调用的函数中的代码。

Answer 4

您可以将document.write用于该变量。 var html = document.write（''+ btnName +''）。请更正单引号和双引号。我不知道这对你有用吗</ p>

Answer 5

如果您不想将事件绑定到每个单独的按钮，您可以将一个事件绑定到所有这些按钮的父节点（例如，父节点按住按钮），然后使用事件冒泡来实现类似影响。

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 live events - 它们基本上是在做我上面写的（当然更优雅）。至于论证，你如何首先获得论证？在不知情的情况下，我无法告诉你最好的前进方式。

Answer 6

我得到了解决方案： -

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

使用Javascript注入html

6 个答案: