将ajax数据项传递给函数(Passing ajax data item to the function)
我有如下的ajax功能，我想将项目发送到查找功能
$.ajax({ url: url, method: "GET", headers: { "Accept": "application/json; odata=verbose" }, async: false, success: function (data) { $.each(data.d.results, function (i, item) { html += '<div class="tileBlock"><img src="/PublishingImages/' + item.Title + '" alt="' + item.To[city] + '" /><br>'; html += '<div class="blockCol1 greyLabel">' + item.To[city] + '</div><div class="blockCol2 fareTxt">' + item.Cost + ' ' + item.From.Currency + '</div><div style="clear: both;"></div>'; html += '<div class=" blockCol3 smallTxt">' + item.Class + ' | ' + item.Trip + '</div><br><div style="clear: both;"></div>'; html += '<div class="btnHolder"><input name="button" type="button" onclick="javascript:Find(' + item + ')" class="searchBtn wth150" h ref"#" value="Book now" /></div></div>'; }); $("#dvPromotion").empty(); $("#dvPromotion").html(html); } });我的发现功能
function Find(item) { console.dir(item) }但它不起作用，有人可以指导我
更新
我的JSON
{"results":[{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(2)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(2)","etag":"\"4\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"dffa96c4-1b04-419a-991c-0913640152c4","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"4302885c-0545-4cbf-9771-8cea409b4d98","type":"SP.Data.StationsListItem"},"Title":"Abu Dhabi"},"Title":"abuDhabi.jpg","Class":"economy","Trip":"RT","Cost":"60"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(3)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(3)","etag":"\"5\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"f57e53d4-d576-4be7-a141-2357c4287013","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"383e7bfd-cf17-4fc4-b115-03ceaeb71db9","type":"SP.Data.StationsListItem"},"Title":"Bangalore"},"Title":"banglore.jpg","Class":"economy","Trip":"RT","Cost":"99"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(4)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(4)","etag":"\"5\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"09ab5da0-8c92-437c-974d-111f31f9cb51","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"24a99e65-fef4-452d-9879-9110b4b2e1bf","type":"SP.Data.StationsListItem"},"Title":"Beirut"},"Title":"beirut.jpg","Class":"economy","Trip":"RT","Cost":"56"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(5)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(5)","etag":"\"5\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"8c9fb3d0-1f9e-44c7-9921-bb5fa63a929f","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"efb0db77-3dfd-42d7-9bb5-3b9733ac68be","type":"SP.Data.StationsListItem"},"Title":"Cairo"},"Title":"cairo.jpg","Class":"economy","Trip":"RT","Cost":"79"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(6)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(6)","etag":"\"5\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"70a824cc-a12f-4d6f-ba58-7f67a9ac439b","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"4bcb5bd1-e49e-430d-9091-5edda2d6ccbc","type":"SP.Data.StationsListItem"},"Title":"Colombo"},"Title":"colombo.jpg","Class":"economy","Trip":"RT","Cost":"92"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(7)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(7)","etag":"\"5\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"48314626-626e-433d-bea2-bb404b525629","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"77511f79-1dd1-466c-a66c-06a4c3bd6946","type":"SP.Data.StationsListItem"},"Title":"Delhi"},"Title":"delhi.jpg","Class":"economy","Trip":"RT","Cost":"88"}]}I have ajax function as below and I want to send item to the find function
$.ajax({ url: url, method: "GET", headers: { "Accept": "application/json; odata=verbose" }, async: false, success: function (data) { $.each(data.d.results, function (i, item) { html += '<div class="tileBlock"><img src="/PublishingImages/' + item.Title + '" alt="' + item.To[city] + '" /><br>'; html += '<div class="blockCol1 greyLabel">' + item.To[city] + '</div><div class="blockCol2 fareTxt">' + item.Cost + ' ' + item.From.Currency + '</div><div style="clear: both;"></div>'; html += '<div class=" blockCol3 smallTxt">' + item.Class + ' | ' + item.Trip + '</div><br><div style="clear: both;"></div>'; html += '<div class="btnHolder"><input name="button" type="button" onclick="javascript:Find(' + item + ')" class="searchBtn wth150" h ref"#" value="Book now" /></div></div>'; }); $("#dvPromotion").empty(); $("#dvPromotion").html(html); } });My find function
function Find(item) { console.dir(item) }But it is not working, can somebody guide me
Update
MY JSON
{"results":[{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(2)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(2)","etag":"\"4\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"dffa96c4-1b04-419a-991c-0913640152c4","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"4302885c-0545-4cbf-9771-8cea409b4d98","type":"SP.Data.StationsListItem"},"Title":"Abu Dhabi"},"Title":"abuDhabi.jpg","Class":"economy","Trip":"RT","Cost":"60"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(3)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(3)","etag":"\"5\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"f57e53d4-d576-4be7-a141-2357c4287013","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"383e7bfd-cf17-4fc4-b115-03ceaeb71db9","type":"SP.Data.StationsListItem"},"Title":"Bangalore"},"Title":"banglore.jpg","Class":"economy","Trip":"RT","Cost":"99"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(4)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(4)","etag":"\"5\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"09ab5da0-8c92-437c-974d-111f31f9cb51","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"24a99e65-fef4-452d-9879-9110b4b2e1bf","type":"SP.Data.StationsListItem"},"Title":"Beirut"},"Title":"beirut.jpg","Class":"economy","Trip":"RT","Cost":"56"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(5)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(5)","etag":"\"5\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"8c9fb3d0-1f9e-44c7-9921-bb5fa63a929f","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"efb0db77-3dfd-42d7-9bb5-3b9733ac68be","type":"SP.Data.StationsListItem"},"Title":"Cairo"},"Title":"cairo.jpg","Class":"economy","Trip":"RT","Cost":"79"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(6)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(6)","etag":"\"5\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"70a824cc-a12f-4d6f-ba58-7f67a9ac439b","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"4bcb5bd1-e49e-430d-9091-5edda2d6ccbc","type":"SP.Data.StationsListItem"},"Title":"Colombo"},"Title":"colombo.jpg","Class":"economy","Trip":"RT","Cost":"92"},{"__metadata":{"id":"Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(7)","uri":"http://webdev.kuwaitairways.com:8080/_api/Web/Lists(guid'6aaed852-b5cf-4c6a-8066-9d1b85fb52f4')/Items(7)","etag":"\"5\"","type":"SP.Data.PromotionListItem"},"From":{"__metadata":{"id":"48314626-626e-433d-bea2-bb404b525629","type":"SP.Data.StationsListItem"},"Title":"Kuwait","Currency":"KWD"},"To":{"__metadata":{"id":"77511f79-1dd1-466c-a66c-06a4c3bd6946","type":"SP.Data.StationsListItem"},"Title":"Delhi"},"Title":"delhi.jpg","Class":"economy","Trip":"RT","Cost":"88"}]}最满意答案
此方法适用于对现有代码进行最少的更改。 基本上它将涉及两件事：
将自定义数据属性附加到动态生成的按钮Ref： http ： //html5doctor.com/html5-custom-data-attributes/
使用按钮class-name作为选择器上下文将事件处理程序附加到按钮的父元素Ref： http ： //api.jquery.com/on/
请在https://jsfiddle.net/y0bafvvt/看到小提琴
$.ajax({ url: 'https://api.myjson.com/bins/1mkxw', method: "GET", headers: { "Accept": "application/json; odata=verbose" }, async: false, success: function (data) { let html; $.each(data.results, function (i, item) { html += '<div class="tileBlock"><img src="/PublishingImages/' + item.Title + '" alt="' + item.To.Title + '" /><br>'; html += '<div class="blockCol1 greyLabel">' + item.To.Title + '</div><div class="blockCol2 fareTxt">' + item.Cost + ' ' + item.From.Currency + '</div><div style="clear: both;"></div>'; html += '<div class=" blockCol3 smallTxt">' + item.Class + ' | ' + item.Trip + '</div><br><div style="clear: both;"></div>'; html += '<div class="btnHolder"><input name="button" class="btn-finder" type="button" data-item="' + encodeURIComponent(JSON.stringify(item)) + '" class="searchBtn wth150" href="#" value="Book now" /></div></div>'; }); $("#dvPromotion").empty(); $("#dvPromotion").html(html); } }); // Attach an event listener to the document element (or any other parent element of your buttons) $(document).on('click', '.btn-finder', function() { console.dir(JSON.parse(decodeURIComponent($(this).data('item')))); });This approach will work with making minimum changes to your existing code. Basically it will involve two things:
Attaching custom data attributes to your dynamically generated buttons Ref: http://html5doctor.com/html5-custom-data-attributes/
Attaching an event handler to a parent element of your buttons with your buttons class-name as selector context Ref: http://api.jquery.com/on/
Please see the fiddle at https://jsfiddle.net/y0bafvvt/
$.ajax({ url: 'https://api.myjson.com/bins/1mkxw', method: "GET", headers: { "Accept": "application/json; odata=verbose" }, async: false, success: function (data) { let html; $.each(data.results, function (i, item) { html += '<div class="tileBlock"><img src="/PublishingImages/' + item.Title + '" alt="' + item.To.Title + '" /><br>'; html += '<div class="blockCol1 greyLabel">' + item.To.Title + '</div><div class="blockCol2 fareTxt">' + item.Cost + ' ' + item.From.Currency + '</div><div style="clear: both;"></div>'; html += '<div class=" blockCol3 smallTxt">' + item.Class + ' | ' + item.Trip + '</div><br><div style="clear: both;"></div>'; html += '<div class="btnHolder"><input name="button" class="btn-finder" type="button" data-item="' + encodeURIComponent(JSON.stringify(item)) + '" class="searchBtn wth150" href="#" value="Book now" /></div></div>'; }); $("#dvPromotion").empty(); $("#dvPromotion").html(html); } }); // Attach an event listener to the document element (or any other parent element of your buttons) $(document).on('click', '.btn-finder', function() { console.dir(JSON.parse(decodeURIComponent($(this).data('item')))); });更多推荐
发布评论