동적으로 생성 된 div onclick 이벤트

-1

아약스로 동적으로 생성 된 버튼에 onclick 이벤트를 추가하고 싶습니다. 어떻게해야합니까?동적으로 생성 된 div onclick 이벤트

콘텐츠를 생성하는 코드가 있는데, 해당 항목을 클릭하면 팝업 창이 나타납니다. 이 같은

function getTableData() { 

      $.post('loader.php', getGetStr(), function(data) { 

      Object.size = function(obj) { 
       var size = 0, key; 
       for (key in obj) { 
        if (obj.hasOwnProperty(key)) size++; 
       } 
       return size; 
      }; 
       data = $.parseJSON(data)['query-data']; 
       var leng = Object.size(data); 

       var html = ''; 

       for(var i = 0; i<leng; i++) { 
        html += '<tr><td>&nbsp;</td>\n\ 
           <td>'+data[i].buy_type+'</td>\n\ 
           <td>'+data[i].prop_type+'</td>\n\ 
           <td>'+data[i].district+'</td>\n\ 
           <td>'+data[i].street+'</td>\n\ 
           <td>'+data[i].room_min+'</td>\n\ 
           <td>'+data[i].room_max+'</td>\n\ 
           <td>'+data[i].price_min+' mFt</td>\n\ 
           <td>'+data[i].price_max+' mFt</td>\n\ 
           <td>'+data[i].condition_type+'</td>\n\ 
           <td>'+data[i].heat_type+'</td>\n\ 
           <td>'+data[i].lift_type+'</td>\n\ 
           <td>'+data[i].parking_type+'</td>\n\ 
           <td><img src="style/images/icons/delete.png" id="'+data[i].id+'" class="delete-searching-item"/></td>\n\ 
          </tr>'; 

       } 

       $('table').append(html); 
       $('.delete-searching-item').on('click',function() { 
        var id = $(this).attr('id'); 
          alert(id); 
          $('#submit-delete').append('<input type="hidden" name="to-delete" value="' + id + '">'); 
          $('#why-delete').fadeIn(500); 
       }); 



     }); 
     }

출처

2013-07-30 Allili Omár

jQuery의 아래에서 확인하시기 바랍니다. http://api.jquery.com/on/ this를 문서로드 또는 무언가에서 생성 된 요소에 사용할 수 있습니다. –

그리고? 작동하지 않습니까? 어떤 증상이 있습니까? 기대하지 않는 것은 무엇입니까? 클릭 이벤트를 연결하는 것처럼 보입니다. ('getTableData'를 두 번 호출하면 테이블을 비우지 않고도 이미 존재하는 셀을 추가하면 모든 요소를 두 번 연결하는 것처럼 보입니다. 지난 시간에 접속했습니다.] –

나는 simliar를 사용합니다. 나는 각 요소 $ (문서) .ready (함수() { \t $ ("A"). 클릭 (함수() { ... 하지만 추가 할 경우 콘텐츠에 온 클릭 기능을 추가했습니다 DOM에 동적으로 적용 할 수 있으며 내용은 요소입니다.이 새로운 요소를 클릭하면 onClick 처리기에서 처리되지 않습니다. – Reinhard

사용 : 당신은 당신이 예를 들어, table을 변경하지 않은 요소를 참조 할 필요가 DOM 후 img.delete-searching-item을 추가하기 때문에

$('table').on('click','.delete-searching-item',function() {

. 그리고 .on()을 사용하면 dom에서 "되돌릴 수"있습니다.

그래서 전체 코드 :

function getTableData() { 
    $.post('loader.php', getGetStr(), function(data) { 
     Object.size = function(obj) { 
      var size = 0, 
       key; 
      for (key in obj) { 
       if (obj.hasOwnProperty(key)) size++; 
      } 
      return size; 
     }; 
     data = $.parseJSON(data)['query-data']; 
     var leng = Object.size(data); 
     var html = ''; 
     for (var i = 0; i < leng; i++) { 
      html += '<tr><td>&nbsp;</td>\n\ 
           <td>' + data[i].buy_type + '</td>\n\ 
           <td>' + data[i].prop_type + '</td>\n\ 
           <td>' + data[i].district + '</td>\n\ 
           <td>' + data[i].street + '</td>\n\ 
           <td>' + data[i].room_min + '</td>\n\ 
           <td>' + data[i].room_max + '</td>\n\ 
           <td>' + data[i].price_min + ' mFt</td>\n\ 
           <td>' + data[i].price_max + ' mFt</td>\n\ 
           <td>' + data[i].condition_type + '</td>\n\ 
           <td>' + data[i].heat_type + '</td>\n\ 
           <td>' + data[i].lift_type + '</td>\n\ 
           <td>' + data[i].parking_type + '</td>\n\ 
           <td><img src="style/images/icons/delete.png" id="' + data[i].id + '" class="delete-searching-item"/></td>\n\ 
          </tr>'; 
     } 
     $('table').append(html); 
     $('table').on('click','.delete-searching-item',function() { 
      var id = $(this).attr('id'); 
      alert(id); 
      $('#submit-delete').append('<input type="hidden" name="to-delete" value="' + id + '">'); 
      $('#why-delete').fadeIn(500); 
     }); 
    }); 
}

출처

2013-07-30 06:11:01 Sergio

그러나 OP 코드에서 DOM 요소는 ** 전화가 왔을 때 ** 전화는 ** 추가 전화 ** 후에 ** 테이블에 전화했기 때문에 발견되었습니다. 대표단은 더 나은 접근 방법 일 수 있지만 위임 또는 문제가되는 DOM에없는 요소를 연결하려고합니다. (OP가 문제를 * 말하고 있는지도 불분명합니다 *) –

-1

가 아약스로 생성 된 경우에도 요소에 이벤트를 추가 기능에

$(".delete-searching-item").live("click", function(){ }); // jQuery 1.3+ 
$(document).delegate(".delete-searching-item", "click", function(){ }); // jQuery 1.4.3+ 
$(document).on("click", ".delete-searching-item", function(){ }); // jQuery 1.7+

출처

2013-07-30 06:14:19 Vamsikrishna

동적으로 생성 된 div onclick 이벤트

답변

관련 문제