1

我必须通过 javascript 将以下 html 行注入到文档中：

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

除此之外，我必须在要调用的函数需要一个 arg 的按钮上注册一个 onclick，'arg'这样 javascript 看起来像这样：

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

我如何实现这一目标？一个明显的解决方案是为按钮分配一个 ID，然后在将 html 附加到文档后注册一个单击功能。但我不想这样做，因为按钮太多。有没有你能想到的另一种选择。

加法： 函数名是动态的，'arg'进去的也是动态的。如果需要，则必须自动生成一个 Id。

**

我有解决办法，请看下面

**

4

6 回答 6

3

我会推荐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>
于 2009-12-19T06:18:55.613 回答
3

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

于 2009-12-19T09:07:54.780 回答
0

由于您不想以通常的方式分配 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 事件，并且由于它检查当前浏览器中哪个方法有效，因此它支持主要浏览器（据我测试）。

为了便于阅读，我取出了一些代码，但这只是将要调用的函数中的代码。

于 2009-12-19T06:19:48.937 回答
0

您可以将 document.write 用于该变量。var html = document.write('' + btnName + '')。请更正单引号和双引号。我不知道这对你有用与否

于 2009-12-19T06:26:22.307 回答
0

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

例如

<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 实时事件——它们本质上是在做我上面写的（当然更优雅）。至于论据，你首先如何获得论据？不知道这一点，我真的不能告诉你最好的前进方式。

于 2009-12-19T06:28:26.127 回答
-3

我得到了解决方案：-

var html = "<button type='button' onclick='"+ fnName +"("+ JSON.stringify(data) +")'>"+ btnName + "</button>"
于 2009-12-19T06:58:43.660 回答