如何將按鈕功能綁定到數組中的相應項目 - AJAX，Firebase

我試圖先從社交API發出一個AJAX請求，然後在div中添加一個按鈕來保存相應項目的結果數組到我的firebase數據庫。例如，如何將按鈕功能綁定到數組中的相應項目 - AJAX，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？

我不確定這是否有意義，所以請讓我知道是否需要澄清。預先感謝您提供的任何幫助！

來源

2015-05-23 cmgsakell

嘗試將參數傳遞給'saveToDatabase'功能 – bugwheels94

你能提供的是什麼會是什麼樣子的例子嗎？我嘗試傳遞參數，但dataTitle仍然未定義？它不會是這樣嗎？ onClick =「saveToDatabase（\''+ dataTitle +'\'）」 – cmgsakell

這是非常破碎的。最糟糕的是，我懷疑你正在從外部來源獲取未經過處理的內容並將其放入URL鏈接 - 這是XSS的一個配方。稍微不太重要，但是可能90％問題的根本原因，jQuery的目的是從演示文稿中抽象出邏輯，因此您不應該在此處手動編寫'src'和'onClick'事件。你應該爲此使用jQuery。 – Kato

這會失敗，因爲您正在迭代整個列表並將它們分配給全局變量。結果不是隨機的 - 它是列表中的最後一個項目，這是最後一個分配給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(/[<>'"]/, ''); 
}

來源

2015-05-25 18:46:58 Kato

我其實剛剛結束了通過創建一個像這樣的全局數組索引傳遞給函數。它似乎工作正常......任何理由我不應該這樣做？

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 
    }); 
}

來源

2015-05-26 02:29:09 cmgsakell

如何將按鈕功能綁定到數組中的相應項目 - AJAX，Firebase

回答

相關問題