[jQuery] 동적 생성한 엘리먼트의 클래스 찾기

동적으로 생성한 엘리먼트를 찾아 가는 것은 다음과 같이 on 함수를 이용하면 됩니다.

 

부모 엘리먼트에 <tr>...</tr>을 추가하고 그 중에서 클릭 이벤트를 통해서 새롭게 추가된 엘리먼트 정보를 이용하는 방법을 소개합니다.

 

$("기존에 있는 부모 엘리먼트").on("click", "새로이 동적으로 추가된 엘리먼트", function(){

    $(this)를 통해서 새롭게 추가된 엘리먼트 중에 클릭한 것을 찾을 수 있습니다.

});

 

HTML

<table id="tblViewPoints" width="100%">
    <thead>
        <tr><th width="30%">Name</th><th width="70%">Edit</th></tr>
    </thead>
    <tbody id="tblViewPointsBody">
    </tbody>
</table>

JavaScript 테이블에 행을 추가하는 함수

function showViewPointsTable(){
    let allViewPoint = HPViewPoint.getAllViewPoint();
    let tbl = "";
    $.each(allViewPoint, function(idx,item){
        tbl += "<tr><td>" + item.name + "</td>";
        tbl += "<td><button class='btnShowViewPoint' data-view='" + item.jsonString + "'>show</button>";
        tbl += "&nbsp;";
        //tbl += "<button class='editViewPointName'>edit</button>";
        tbl += "&nbsp;";
        tbl += "<button class='deleteViewPoint'  data-milli='" + item.milliseconds + "'>delete</button></td></tr>";
    });
    $("#tblViewPointsBody").empty();
    $("#tblViewPointsBody").append(tbl);
}

JavaScript 동적 생성 엘리먼트 호출

$("#tblViewPointsBody").on("click", ".btnShowViewPoint", function(){
    let strViewPoint = $(this).data("view");
    HPViewPoint.cwv = hwv;
    HPViewPoint.dispViewPoint(strViewPoint);
});
$("#tblViewPointsBody").on("click", ".deleteViewPoint", function(){
    let milli = $(this).data("milli");
    HPViewPoint.deleteViewPoint(milli);
    showViewPointsTable();
});