在循环内添加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点击事件“自动”点击所有事件

回答

相关问题