在循環內添加jQuery點擊事件「自動」點擊所有事件

我有一個jQuery的功能，在ASP.Net中執行一個簡單的Ajax GET，並返回數據（Json數組），填充一個網頁。在循環內添加jQuery點擊事件「自動」點擊所有事件

我試圖將點擊事件綁定到使用下面的lopp創建的每個div，但是當運行此操作時，所有的點擊事件都會在頁面加載時發生！

任何想法？

function grabList() { 
    $('#temp').empty(); 

    $.ajax({ 
     url: '/Home/GoModel', 
     method: 'GET', 
     success: function (data) {    
      for (var i = 0; i < data.length; i++) { 
       $('#temp').append('<div class="host col-sm-3"> id=' + data[i].name + '>' + data[i].name + '</div>'); 

       if (data[i].hostConnected === true) { 
        $('#temp').append('<div class="host connected col-sm-3" id=' + data[i].name + '>' + data[i].name + '</div>'); 
        continue; 
       } 

       $('#' + data[i].name).on('click', connect(data[i].name)); // Problem occurs 
      } 
      $('#container').html($('#temp').html()); 
     } 
    }); 
}

來源

2016-08-04 ma11achy

你能詳細說明究竟發生了什麼嗎？「所有點擊事件同時發生在頁面上」是什麼意思？另外，'connect'函數的代碼是什麼？ –

[Javascript臭名昭着的循環問題？]的可能的重複？（http://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue） –

它不點火的情況下，你是在結合撥打電話：

$('#' + data[i].name).on('click', connect(data[i].name));

你需要做的是這樣的：

$('#' + data[i].name).data({name : data[i].name}); 
    $('#' + data[i].name).on('click', function(e){connect($(e.target).data().name);});

來源

2016-08-04 16:20:35

這是行不通的。這是常見的「閉合迴路」錯誤。點擊事件發生時，「我」會改變。 –

啊是的，很好的發現亞歷克斯。道歉，我專注於主要問題。爲了解決這個問題，將data [i] .name的值寫入創建元素的data屬性，並在函數中解除它。我已經修改了答案來反映這個 –

你可以試試：

function grabList() { 
 
    $('#temp').empty(); 
 

 
    $.ajax({ 
 
    url: 'https://api.github.com/repositories?since=700', 
 
    method: 'GET', 
 
    success: function (data) { 
 
     for (var i = 0; i < data.length; i++) { 
 
     $('#temp').append('<div class="host col-sm-3" id=' + data[i].name + '>' + data[i].name + '</div>'); 
 

 
     if (data[i].hostConnected === true) { 
 
      $('#temp').append('<div class="host connected col-sm-3" id=' + data[i].name + '>' + data[i].name + '</div>'); 
 
      continue; 
 
     } 
 

 
     (function (ele) { 
 
      $('#' + ele).on('click', function (e) { 
 
      alert(ele); 
 
      }); 
 
     })(data[i].name); 
 
     } 
 
     $('#container').html($('#temp').html()); 
 
    } 
 
    }); 
 
} 
 

 
$(function() { 
 
    grabList(); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<div id="temp"></div> 
 
<div id="container"></div>

來源

2016-08-04 16:50:32 gaetanoM

謝謝你，先生！鍛鍊了魅力 – ma11achy

實際上，在綁定到click事件時調用connect()函數，而不是在事件觸發（稍後）時調用。

由於您要將數據傳遞到事件處理程序，因此您需要使用.on()調用的其他參數。試試像這樣的東西。

$('#' + data[i].name).on('click', null, data[i].name, function (e) { 
    connect(e.data); 
});

來源

2016-08-05 21:48:48 ventaur

在循環內添加jQuery點擊事件「自動」點擊所有事件

回答

相關問題