동적으로 생성 된 테이블 행 내에서 ID를 추가하고 조작하는 방법 jquery

러셀 에스 칼데론 로브 리오

내 행에 식별자를 추가하는 방법에 대한 문제가 있습니다. json 데이터를 사용하여 테이블 본문을 채우는 코드가 있습니다.

var table = '';
$.each(result, function (i, item) {
    table += '<tr class="test"><td>' + item.ip_address + '</td><td>' + item.app_name + '</td><td>' + item.crit_severity + '</td><td>' + item.user_password + '</td></tr>';
});
$("#tableLinks tbody").html(table); 

이 테이블이 있습니다

<table class="table table-bordered" id="tableLinks" style="width:70%;margin">
  <thead>
    <tr>
      <th>IP ADDRESS</th>
      <th>APPLICATION NAME</th>
      <th>CRIT/SEVERITY</th>
      <th>USERNAME/PASSWORD</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

이 코드를 사용하여 테스트했지만 작동하지 않습니다. 여기서 오류는 무엇일까요? 감사

$(".test").on('click', function() {
   alert('test');
});
Satpal

현재 사용중인 것을 "직접"바인딩이라고하며 코드가 이벤트 바인딩을 호출 할 때 페이지에있는 요소에만 연결됩니다.

당신은 사용할 필요가 이벤트 위임을 사용하여 ) CSTE 연구진를 ( (제거 및 클래스를 추가하는 등)을 동적으로 요소 또는 조작 선택기를 생성 할 때, 위임-이벤트 접근.

일반 구문

$(staticParentSelector).on('event','selector',callback_function)

$("#tableLinks tbody").on('click', ".test", function(){
    alert('test');
});

대신 document가장 가까운 정적 컨테이너를 사용해야합니다.

위임 된 이벤트는 나중에 문서에 추가되는 하위 요소의 이벤트를 처리 할 수 ​​있다는 장점이 있습니다. 위임 된 이벤트 처리기가 연결될 때 존재하도록 보장되는 요소를 선택하면 위임 된 이벤트를 사용하여 클릭 이벤트를 동적으로 생성 된 요소에 바인딩하고 이벤트 처리기를 자주 연결하고 제거 할 필요가 없습니다.

$(function() {

  $("#tableLinks tbody").on('click', ".test", function() {
    snippet.log('test');
  });

 var result = [{
   ip_address : 123456,
   app_name:'test',
   crit_severity: 'crit_severity',
   user_password: 'user_password'
   }];
  var table = '';
  $.each(result, function(i, item) {
    table += '<tr class="test"><td>' + item.ip_address + '</td><td>' + item.app_name + '</td><td>' + item.crit_severity + '</td><td>' + item.user_password + '</td></tr>';
  });
  $("#tableLinks tbody").html(table);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<table class="table table-bordered" id="tableLinks" style="width:70%;margin">
  <thead>
    <tr>
      <th>IP ADDRESS</th>
      <th>APPLICATION NAME</th>
      <th>CRIT/SEVERITY</th>
      <th>USERNAME/PASSWORD</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

동적으로 생성 된 테이블에 CSS를 추가하는 방법

jquery의 부트 스트랩 테이블을 사용하여 동적으로 생성 된 행에 ID 추가

JavaScript에서 JQuery를 사용하지 않고 동적으로 생성 된 테이블 행을 클릭 할 수있게 만드는 방법은 무엇입니까?

jQuery 테이블에서 동적으로 생성 된 각 셀에서 데이터를 가져 오는 방법

jquery를 사용하여 C #에서 동적으로 생성 된 html 테이블에서 행 값 가져 오기

동적으로 생성 된 테이블 (JQuery)에서 webui-popover를 사용하는 방법

JavaScript 클래스 생성자 내에서 Jquery를 동적으로 로드하고 jquery가 완전히 로드된 후에만 실행을 진행하는 방법

jQuery를 사용하여 HTML 테이블에서 동적으로 생성 된 행의 텍스트 상자 값을 채우는 방법

테이블 행을 동적으로 삽입 / 제거 (추가 된 행에 ID를 부여하는 방법 포함)

nightwatch JS를 사용하여 테이블 행에서 동적으로 생성 된 이미지 ID를 식별하는 방법

jQuery .validate ()는 동적으로 생성 된 테이블 행에서 작동하지 않습니다.

동적으로 생성 된 테이블을 사용하여 동적으로 행을 추가하는 방법

jquery를 사용하여 동적으로 생성 된 테이블에서 행 제거

jQuery를 사용하여 동적으로 생성 된 테이블 행 삭제

jquery에서 동적으로 생성 된 테이블에 클래스를 추가하는 방법은 무엇입니까?

jquery 데이터 테이블에서 동적으로 추가 된 행에 data-title 속성을 추가하는 방법은 무엇입니까?

jquery mobile-1.4에서 동적으로 생성 된 페이지를 pagecontainer에 추가하는 방법

동적으로 생성 된 행에 datepicker를 추가하는 방법

JavaScript에서 동적으로 생성된 각 테이블 행으로 배열을 증가시키는 방법

동적으로 생성 된 행으로 테이블을 변경하는 방법 (rowspan / colspan 추가)?

동적으로 생성 된 테이블 행을 데이터베이스에 저장하는 방법

고유하게 식별 될 수 있도록 테이블 행에 ID를 동적으로 추가하는 방법

jQuery-동적으로 추가 된 드롭 가능한 테이블 행에 대한 이벤트 리스너를 구현하는 방법은 무엇입니까?

테이블에서 동적으로 생성 된 tr을 처리하는 방법

Angular4 테이블에서 고유 ID로 HTML 행을 동적으로 추가하는 방법

동적으로 생성 된 JTable에 이미지를 추가하는 방법

jQuery를 사용하여 동적으로 생성된 요소에서 데이터를 가져오는 방법

jquery를 사용하여 동적으로 추가 된 테이블에서 ID가없는 특정 <td> 셀을 삭제하는 방법은 무엇입니까?

jQuery 동적으로 생성 된 div에서 동적으로 생성 된 요소를 추가 / 제거하는 방법은 무엇입니까?