Javascript dom 解析故障排除

Question

我从字符串创建按钮并将其添加到 DOM。

这是 JavaScript 代码:

var se = "<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick=\"jQuery('#jqgrid').saveRow('" + cl + "','" + null + "','" + '../UpdateStatus' + "','" + {'name':"content1"} + "','" + null + "','" + null + "','" + null + "');\"><i class='fa fa-save'></i></button>";

以下是按钮如何附加到 DOM:

 jQuery("#jqgrid").jqGrid('setRowData', ids[0], { act: se });

jqgrid - 是某个 html 元素的 id。

正如您在按钮内部看到的，我有 onClick 属性，该属性调用名为 saveRow 的函数。

这是被调用函数的签名:

saveRow: function (rowid, successfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc) {}

我传递给 saveRow 函数的参数之一是 json:

{'name':"content1"}

以及页面加载后按钮在 DOM 树中的外观:

(抱歉文字太小)

正如你所看到的，DOM 转换了这个参数(红框中):

{'name':"content1"}

对此:

'[Object object]'

知道为什么 JSON 参数转换为这个 [Object 对象] 吗？

更新:

DOM 的外观如下:

如果我用这种态度:

se = "<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick=\"jQuery('#jqgrid').saveRow('" + cl + "','" + null + "','" + '../UpdateStatus' + "','" + JSON.stringify({ foo: 'bar' }) + "','" + null + "','" + null + "','" + null + "');\"><i class='fa fa-save'></i></button>";

更新2:

DOM 的外观如下:

如果我用这种态度:

se="<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick='jQuery('#jqgrid').saveRow('" + cl + "','" + null + "','" + '../UpdateStatus' + "','" + JSON.stringify({ foo: 'bar' }) + "','" + null + "','" + null + "','" + null + "');'><i class='fa fa-save'></i></button>";

单击按钮后出现此错误:

Answer 1

这是因为当您尝试将 JSON 添加为 html 时，它会调用函数 toString() ，该函数返回 [Object object] ，如本例所示。

var obj = {foo: 'bar'};

console.log(obj.toString());

By default, the toString() method is inherited by every object descended from Object. If this method is not overridden in a custom object, toString() returns "[object type]", where type is the object type.

<子> MDN

如果您想使用 JSON，请先使用 JSON.stringify 将其转换为字符串

The JSON.stringify() method converts a JavaScript value to a JSON string

像这样:

var obj = {foo: 'bar'};

var a = "<a onclick='doSome(" + JSON.stringify(obj) + ")'>Do Something</a>";

document.body.innerHTML += a;

function doSome(obj) {
  console.log(obj.foo);
}

更新2

var cl = 198;

var se = "<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick='jQuery(\"#jqgrid\").saveRow(\"" + cl + "\", " + null + "," + "\"../UpdateStatus\"," + JSON.stringify({ foo: 'bar' }) + ")'><i class='fa fa-save'></i></button>";

document.body.innerHTML += se;

jQuery.fn.saveRow = function() {
  console.log(arguments);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>