Question

我尝试首先从社交API发出一个AJAX请求，然后在div中添加一个按钮，将数组中的相应项目保存到我的firebase数据库中。例如，

我有我的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 )

然后我有我的功能，我想保存＆＃39;标题＆＃39;按钮附加到firebase数据库的对象。

var dataTitle;

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

问题是，当单击按钮时，它会从数组内部发布一个随机标题，而不是附加按钮的项目标题...如何将按钮功能绑定到正确的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

2 个答案: