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 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());

默认情况下，toString() 方法被从 Object 继承的每个对象继承。如果在自定义对象中没有重写此方法，则 toString() 返回“[object type]”，其中 type 是对象类型。

_MDN

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

JSON.stringify() 方法将 JavaScript 值转换为 JSON 字符串

像这样：

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>