javascript - 将 ajax 数据项传递给函数

Question

我有如下 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 + '&nbsp;' + item.From.Currency + '</div><div style="clear: both;"></div>';
      html += '<div class=" blockCol3 smallTxt">' + item.Class + '&nbsp;|&nbsp;' + 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"}]}

Answer 1

此方法只需对现有代码进行最少的更改即可。 基本上它会涉及两件事:

1. 将自定义数据属性附加到动态生成的按钮引用:http://html5doctor.com/html5-custom-data-attributes/

2. 将事件处理程序附加到按钮的父元素，并将按钮类名作为选择器上下文引用:http://api.jquery.com/on/

请参阅 fiddle 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 + '&nbsp;' + item.From.Currency + '</div><div style="clear: both;"></div>';
      html += '<div class=" blockCol3 smallTxt">' + item.Class + '&nbsp;|&nbsp;' + 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'))));
});