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

【问题标题】：How to bind button function to a corresponding item in an array - AJAX, Firebase如何将按钮功能绑定到数组中的相应项目 - AJAX，Firebase
【发布时间】：2015-05-23 15:16:58
【问题描述】：

我正在尝试首先从社交 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 )

然后我有我的功能，我想将按钮附加到 firebase 数据库的对象的“标题”保存。

var dataTitle;

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

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

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

【问题讨论】：

尝试将参数传递给saveToDatabase函数
您能举个例子说明一下吗？我尝试传递参数，但 dataTitle 仍然未定义？不会是这个样子吗？ onClick="saveToDatabase(\'' + dataTitle + '\')"
这太坏了。最糟糕的是，我怀疑您正在从外部来源获取未经处理的内容并将其放入 URL 链接中——这是 XSS 的秘诀。稍微不那么重要，但可能是 90% 问题的根本原因，jQuery 的重点是从演示文稿中抽象逻辑，因此您不应该在这里手动编写 src 和 onClick 事件。为此，您应该使用 jQuery。

标签： javascript arrays ajax firebase

【解决方案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(/[<>'"]/, '');
}

【讨论】：

【解决方案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
  });  
}

【讨论】：