Question

我在表中有一个jQuery foreach附加列表。我想要的是将我从ajax成功函数获取的完整对象传递给我。但是，当我尝试将Object作为参数传递给另一个JS函数时，该参数变得不确定。

这是我的附表：

$.ajax({

  type: "post",
  url: "@Url.Content("~/Estimate/GetOffsetLetterHeadCost
  ")",
  data: $('#OffLetterHeadForm').serialize(),
  datatype: "json",
  traditional: true,
  success: function(data) {

    var Json = data;

    $.each(Json, function(index, obj) {


      var row = '<tr>' + '<td style="padding:10px" > <b style="font-size:18px">' + obj.VendorName + '</b>  </td>  ' + '<td><label  id="machineId' + index + '">' + obj.MachineName + '  < / label > < /td > ' + '<td> <input type="button"   value="Order" id="btn' + index + '"onclick = "SaveOffsetOrder(obj)" / > < /td></tr > ';

      $("#AllVendorsList").append(row);

    });

  }
});


function SaveOffsetOrder(obj) { // here i am getting obj undefined
  // do something with obj
}

<table id="AllVendorsList" class="table table-striped table-hover  " style="font-size:14px; font-family:'Trebuchet MS'"></table>

请帮助。。谢谢

Answer 1

您需要将onclick指定为onclick='SaveOffsetOrder( + JSON.stringify（obj）+ )'请注意，SaveOffsetOrder和JSON.stringify(obj)之前的单引号将创建onclick的作用与SaveOffsetOrder({"name":"test"})相同。

var obj = {name: 'test'};
var html = `<input type="button"   value="Order" id="btn' + index + '" 
                  onclick='SaveOffsetOrder(` + JSON.stringify(obj) + `)' />`;
document.getElementById('content').innerHTML = html;

function SaveOffsetOrder(obj){
  console.log(obj);
}

<div id='content'></div>

Answer 2

与其使用onclick而是使用bind，这将使生活变得更加轻松。例如

'<td> <input type="button"   value="Order" id="btn' + index + '" 
      / > < /td></tr > '
$("#AllVendorsList").append(row);
$("#btn" + index).bind("click",{obj:obj},SaveOffsetOrder);

function SaveOffsetOrder(e){
 console.log(e.data.obj);//this will return your object.
}

Answer 3

很容易将引号内的变量和字符串/文本弄乱，因此颜色会很有帮助。确保所有变量都“弹出”。

如果仍然不起作用，请将所有单引号切换为双引号，并在单引号的位置替换所有双引号。或者，放弃并仅稍后在脚本中使用选择器，而不是使用onclick属性

已编辑（在功能参数\'中添加了转义字符）

<html>
<body>
    The content of the body element is displayed in your browser.
<script>
    var obj = "hello world";
    var row = '<tr>\
        <td style="padding:10px" >\
            <b style="font-size:18px">'+obj+'</b>\
        </td>\
        <td>\
            <label id="machineId'+obj+'">'+obj+'</label>\
        </td>\
        <td>\
            <input type="button" value="Order" id="btn'+obj+'" onclick = "SaveOffsetOrder(\'' + obj +' \')"/>\
       </td>\
    </tr>';

    document.body.innerHTML = row;
    function SaveOffsetOrder(obj){
        alert(obj);
    }
</script>
</body>
</html>

----之前（仅适用于整数吗？）-----

var row = '<tr>\
    <td style="padding:10px" >\
        <b style="font-size:18px">'+obj.VendorName+'</b>\
    </td>\ 
    <td>\
        <label id="machineId'+index+'">'+obj.MachineName+'</label>\
    </td>\ 
    <td>\
        <input type="button" value="Order" id="btn'+index+'" onclick = "SaveOffsetOrder(' + obj + ')"/>\
    </td>\
</tr>';

如何在js函数中将对象作为函数参数传递？

3 个答案: