如何将按钮功能绑定到数组中的相应项目 - AJAX, Firebase

Question

我试图首先从社交 API 发出 AJAX 请求，然后在结果中附加 div 中的按钮，该按钮会将相应的项目保存在数组中到我的火力数据库。例如，

我有我的 AJAX 请求 - 我删除了大约 75% 的问题不需要的实际代码。

 $.ajax({
          type : 'GET',
          url : url,
            dataType : "jsonp",
            cache: false,
         success : function(data){
         console.debug(data);
         vids = data.response.items;

      for(var i in vids) {

        dataTitle = vids[i].title;

        ncode = "<div class='tile'><img src='"+ vids[i].title "'/></a><button class='btn' type='button' onClick='saveToDatabase()'>Save</button></div>";

        $('#content').append( ncode )

然后我有我的功能，我想保存 object 按钮的 'title' 附加到 firebase 数据库。

var dataTitle;

function saveToDatabase() { 
 ref.push({
    title: dataTitle
  });  
}

问题是，当单击按钮时，它会从数组内部发布一个随机标题，而不是按钮所附加的项目的标题...如何将按钮功能绑定到正确的数据标题？

我不确定这是否有意义，所以如果需要澄清，请告诉我。提前感谢您提供的任何帮助！

Answer 1

这失败了，因为您正在迭代整个列表并将它们分配给全局变量。结果根本不是随机的——它是列表中的最后一项，也是最后分配给 globar 变量的。

尝试使用 jQuery 而不是编写您自己的 DOM 事件，并使用闭包来引用视频标题。

function saveToDatabase(dataTitle) { 
 ref.push({
    title: dataTitle
  });  
}

$.ajax({
  type : 'GET',
  url : url,
  dataType : "jsonp",
  cache: false,
  success : function(data) {
    console.debug(data); // console.debug not supported in all (any?) versions of IE
    buildVideoList(data.response.items);
  }
});

function buildVideoList(vids) {
  $.each(vids, function(vid) {
    var $img = $('<img></img>');
    $img.attr('src', sanitize(vid.title));

    var $button = $('<button class="btn">Save</button>');
    $button.click(saveToDatabase.bind(null, vid.title));

    $('<div class="tile"></div>')
      .append($img)
      .append($button)
      .appendTo('#content');
  });
}

// rudimentary and possibly ineffective, just here to
// point out that it is necessary
function sanitize(url) {
  return url.replace(/[<>'"]/, '');
}

Answer 2

我实际上只是通过像这样创建一个全局数组将索引传递给函数。它似乎工作正常...有什么理由我不应该这样做？

var vids = []; //global 

function foo() {
 $.ajax({
          type : 'GET',
          url : url,
            dataType : "jsonp",
            cache: false,
         success : function(data){
         console.debug(data);
         vids = data.response.items;

      for(var i in vids) {

        ncode = "<div class='tile'><img src='"+ vids[i].title "'/></a><button class='btn' type='button' onClick='saveToDatabase('+i+')'>Save</button></div>";

        $('#content').append( ncode )
} //end ajax function

function saveToDatabase(i) { 
 ref.push({
    title: vids[i].title
  });  
}

如何将按钮功能绑定到数组中的相应项目 - AJAX, Firebase

How to bind button function to a corresponding item in an array - AJAX, Firebase

javascript

arrays

ajax

firebase