2016-11-29 58 views
0

在Ajax中调用在html页面中动态填充数据。如何将jQuery中的json对象迭代到javascript函数

要求:填充,如果我们点击按钮,它应该传递对象需要沿着调用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 
} 
+1

您应该使用.on()作为动态按钮的事件委托。 – ScanQR

回答

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 
} 
0

对于你应该使用.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 
0

首先检查你的函数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 
} 

,如果你是无法调用的函数,那么你需要添加事件监听器以不同的方式将事件绑定使用。对()动态创建的元素。如果需要,你可以检查这个链接http://api.jquery.com/on/作为examles。