Question

在Ajax调用中，在html页面中动态填充数据。

要求：如果我们点击按钮填充后，它应该调用JavaScript函数以及传递对象所需的函数。在JavaScript中，我们需要使用value.id，value.title，value.description等来访问数据.....（预期结果）但我无法从函数参数中获取数据，我尝试使用 stringify，解析方法，但没有。

请告诉我，如何在JavaScript函数中访问？

success : function(data) {
 var listData = null;
 $.each(data.documentsList,function(index, value) { 
   //some logic ----------(iam able to get value.id, value.title, value.description...)
   listData += '<button value="Update" onclick="updateDocument(\''+ value + '\')">Update</button>'
   //some logic ----------
  });//each loop end
 $('#list').html(listData);
 },//success end

function updateDocument(document) {
    console.log("updateDocument" + document);  //[object object]
    console.log(document.title); //undefined
}

Answer 1

我建议不要将事件处理程序挂钩为字符串，而是挂钩到实际的按钮对象：

success : function(data) {
 $('#list').clear();
 $.each(data.documentsList,function(index, value) { 
   //some logic ----------(iam able to get value.id, value.title, value.description...)
   var button = $('<button type="button">Update</button>');
   button.on('click', function() {
       updateDocument(value);
   });
   $('#list').append(button);
   //some logic ----------
  });//each loop end
 },//success end

function updateDocument(document) {
    console.log("updateDocument" + document);  //[object object]
    console.log(document.title); //undefined
}

Answer 2

对于每个动态添加的元素，您应该使用.on()将事件绑定到动态添加的元素（如果与定义的selector匹配。

success : function(data) {

 $.each(data.documentsList,function(index, value) { 

   var button = $('<button type="button">Update</button>');
   button.on('click', function() {
       console.log("updateDocument" + value);
   });

   //append dynamically added element to list
   $('#list').append(button);

  });//each loop end
 },//success end

Answer 3

首先检查您的函数updateDocument（）是否可访问，您可以在函数内放置一个普通的console.log，之后您可以检查实际问题点在哪里。同时将参数名称从文档更改为其他名称。

function updateDocument(res_doc) {
   console.log("updateDocument",  res_doc); // right way to print object 
   console.log("updateDocument " + res_doc); // wrong way to print object 
}

如果您无法调用该函数，则需要以不同的方式添加事件侦听器，以使用 .on（）将事件绑定到动态创建的元素。如果需要，您可以查看此链接http://api.jquery.com/on/以获取考试。

如何将jquery中的迭代json对象传递给javascript函数

3 个答案: