데이터 속성이 동적 DOM에서 지속되지 않음

Question

MySQL 데이터베이스에서 행을 반환하는 AJAX 요청을 기반으로 동적 DOM 요소를 만들었습니다. 내가 뭘 하려는지는 jQuery v.3.2.1을 사용하면서 twitter-bootstrap v.4 모달을 시작할 수 있도록 글꼴 멋진 아이콘을 만드는 것입니다. 모달을 시작하는 요소에는 데이터 대상 및 데이터 토글 속성이 필요하기 때문에 DOM을 만들 때마다이 값을 설정해야하지만 어떤 이유로 든 다음 코드를 시도 할 때마다

// This 
$("<i />", { 
    class: "fa fa-pencil-square text-warning", 
    style: "margin-left: 0.5em; cursor: pointer;" 
}).attr("data-toggle", "modal").attr("data-target", "#frmInsertPolicy").attr("aria-hidden", true).appendTo("#tabCustomers div:last h3:last"); 

// OR this 
$("<i />", { 
    class: "fa fa-pencil-square text-warning", 
    style: "margin-left: 0.5em; cursor: pointer;" 
}).attr("aria-hidden", true).appendTo("#tabCustomers div:last h3:last"); 
$("#tabCustomers div:last h3:last i:last").attr("data-toggle", "modal").attr("data-target", "#frmInsertPolicy"); 

// OR this 
$("<i />", { 
    class: "fa fa-pencil-square text-warning", 
    style: "margin-left: 0.5em; cursor: pointer;" 
}).data("toggle", "modal").data("target", "#frmInsertPolicy").attr("aria-hidden", true).appendTo("#tabCustomers div:last h3:last"); 

// OR this 
$("<i />", { 
    class: "fa fa-pencil-square text-warning", 
    style: "margin-left: 0.5em; cursor: pointer;" 
}).attr("aria-hidden", true).appendTo("#tabCustomers div:last h3:last"); 
$("#tabCustomers div:last h3:last i:last").data("toggle", "modal").data("target", "#frmInsertPolicy"); 

나는 코드를 디버깅하고 나는 <i> DOM 요소가 생성되고 있으며 아리아 숨겨진 속성도 설정되고 있지만, 어떤 이유에서 두 데이터 속성이 설정되지 않았는지 확인합니다.

는 업데이트 내가 노력하고 단지 중복으로 답을 표시 할 코드를 읽을 귀찮게하지 않은 분들을 위해 ... 나는 동적 DOM 요소가있을 때 모두 인을 ATTR 속성을 사용하려고 시도 동적 DOM 요소가 생성 된 후 생성됩니다.

Answer 1

html DOM 요소에 데이터 속성을 유지하려면 .attr("data-toggle")을 사용해야합니다.

http://api.jquery.com/data/

데이터 - 속성의 데이터 속성 에 액세스 할 때 처음으로 당겨되고 :

당신이 더 많은 정보를 찾을 수 있습니다 (.data() 내부 jQuery.cache에 그 값을 저장) 더 이상 액세스되거나 변경되지 않습니다 (모든 데이터 값 은 jQuery에서 내부적으로 저장됩니다)