javascript - 使用 innerHTML 将动态参数传递给 JavaScript 函数

Question

我在使用 innerHTML 将动态参数传递给 JavaScript 函数时遇到问题。

下面是我正在使用的当前代码：

var name = "test";

frm.innerHtml = '<button name="close" id="close" title="Cancel" type="button"
     onclick="closeTab('+name+');">Return</button>';

当我调试closeTab()函数的代码时，变量指定的name参数是null.

我认为在修改 innerHTML 属性时声明值存在问题。

任何帮助将不胜感激。

谢谢

Answer 1

您的动态声明将参数作为变量传递，而不是参数的值。为了更正此问题，您必须将值作为字符串而不是变量传递，这是通过将变量用单引号括起来和转义来完成的，如下所示：

var name = "test";

frm.innerHtml = '<button name="close"  id="close"  title="Cancel" type="button"
      onclick="closeTab(\''+name+'\');">Return</button>';

Answer 2

您生成的代码是：

<button ... onclick="closeTab(test);">Return</button>

你能看出有什么问题吗？test当您实际上打算将其作为字符串时，它被视为变量。

我喜欢使用JSON.stringify使变量可解析（有点像var_export在 PHP 中），但在这种情况下，您还需要转义引号。所以：

JSON.stringify(test).replace(/"/g,""")

在您的按钮中使用它，而不仅仅是test.

Answer 3

使用 DOM：

var name="test";
var el = document.createElement("button");
el.name = "close";
el.id = "close";
el.title = "Cancel";
el.type = "button";
el.onclick = function() {  // an inline function that will be executed when el is clicked
    closeTab(name);        // `name` here contains `"test"`
};
frm.appendChild(el);

我真的不鼓励过度使用innerHTML，因为它很乱，有时会很慢。

Answer 4

假设您的 html 是 -

<form id='frm'>

</form>

你的 JS 应该是 -

var name = "test";
var innerHtml = "<button name='close' id='close' title='Cancel'   type='button'>Return</button>";
$("#frm").html(innerHtml);
$("#close").attr("onclick","javascript:closeTab('"+name+"');");

看看这个 - http://jsfiddle.net/arindam006/avGHz/1/

这是实现这一目标的最干净的方法，尽管 innerHtml 并不是上面每个人都建议的正确方法。

Answer 5

我只是在 innerHTML 中使用了 onclick="closeTab(name);"> 并且它起作用了。我猜这个工作的 coz 名称是全局变量。