루프 내에서 jQuery 클릭 이벤트 추가 "자동"모든 이벤트 클릭

Question

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

Answer 1

그것은 이벤트를 트리거하지 않습니다, 당신은 바인딩에 전화를하고있다 :

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

Answer 2

당신은 시도 할 수 있습니다 :

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

당신은 이런 식으로 할 필요가

을

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>

Answer 3

사실 나중에 이벤트가 발생했을 때 대신 클릭 이벤트에 바인딩 할 때 connect() 함수를 호출하고 있습니다.

데이터를 이벤트 처리기로 전달하려는 경우 .on() 호출의 추가 매개 변수를 사용해야합니다. 대신이 같은 것을 시도해보십시오.

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