jQuery追加與事件綁定

我想追加一個Div的數字與一個ID「列表」的股利，每個股利有一個事件，所以我做一個數組爲每個div被追加。這是我的代碼。jQuery追加與事件綁定

var count = Object.keys(data.results).length; 
     var el = []; 
      for(var i=1; i<=count; i++){ 
      el[i] = $('<div id="'+i+'">data.results[i].name</div>'); 
      $("#list").append(el[i]); 
      el[i].click(function(){ 
       alert(data.results[i].name); 
       $('#searchbox').modal('toggle'); 
      }); 
      }

div中的數據已成功追加。但爲了在綁定到每個div的事件中嘗試提醒數據，它不會警告div中的數據。

我想要做的是在帶有id「list」的div內附加名稱，如果我點擊一個名稱，它應該提醒名稱本身。

來源

2017-04-04 Francis Rubia

我觀察到的另一件事是，如果我提醒該聲明在for循環變量「我」，就是例如附加的結果是5名。所以如果我點擊第一個名字，它應該提醒1，而不是提醒5.我很困惑。 –

相關：[JavaScript閉合內循環 - 簡單實用的例子]（https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example） - 'click''函數將評估'i'表示事件發生時的值，這是'for'循環已經完成遞增'i'直到它等於'count'後的值。（另一種方法是使用['let i']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let）來代替'var i'，但注意它的瀏覽器支持。） –

@JonathanLonowski ok。我明白這一點。 –

您可以通過在所有附加的div元素上使用委託事件處理程序來簡化邏輯，然後使用text()方法檢索所需的值。試試這個：

var data = { 
 
    results: { 
 
    foo: { name: 'foo_name' }, 
 
    bar: { name: 'bar_name' } 
 
    } 
 
} 
 

 
var $list = $("#list").on('click', 'div', function() { 
 
    console.log($(this).text()); 
 
    //$('#searchbox').modal('toggle'); 
 
}); 
 

 
Object.keys(data.results).forEach(function(key, i) { 
 
    $list.append('<div id="' + i + '">' + data.results[key].name + '</div>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="list"></div>

來源

2017-04-04 08:51:56

謝謝。這一個運作良好。 –

的問題是，到時候一個元素被點擊i已被設置爲最大值i = count。要解決這個問題，你必須創建一個閉包。試試這個：

var count = Object.keys(data.results).length; 
var el = []; 
function closure(index){ 
    el[index].click(function(){ 
    alert(data.results[index].name); 
    $('#searchbox').modal('toggle'); 
    }); 
} 
for(var i=1; i<=count; i++){ 
    el[i] = $('<div id="'+i+'">data.results[i].name</div>'); 
    $("#list").append(el[i]); 
    closure(i); 
}

來源

2017-04-04 08:54:50 Titus

jQuery追加與事件綁定

回答

相關問題