jquery를 사용하여 복제 된 개체에 클릭 이벤트를 추가 할 수 없습니다

다음은 복제 된 개체에 클릭 이벤트를 첨부하려고 시도했지만 샘플을 작성했지만 시도 할 수는 없었지만 첨부 할 수 없었습니다. 오브젝트에의 click 이벤트 코드를 확인하고 가치있는 제안jquery를 사용하여 복제 된 개체에 클릭 이벤트를 추가 할 수 없습니다

$(document).ready(function(){ 
 
    var documentSelector = $('.clone-block') 
 
    var arrayOfObjects = [{ 
 
    \t name: "William", 
 
     gender: "Male", 
 
     dateofbirth: "01-01-2017" 
 
    }, 
 
    { 
 
    \t name: "Michale", 
 
     gender: "Female", 
 
     dateofbirth: "01-01-2018" 
 
    }, 
 
    { \t 
 
    \t name: "John", 
 
     gender: "male", 
 
     dateofbirth: "01-01-2019" 
 
    }, 
 
    { 
 
    \t name: "tom", 
 
     gender: "male", 
 
     dateofbirth: "01-01-2020" 
 
    }]; 
 
    
 
    $.each(arrayOfObjects, function (ind, user){ 
 
    \t var clonedObject = documentSelector.clone(true, true);  
 
     clonedObject.find('span').on('click', alertWhenClicked.bind(user)); 
 
     clonedObject.find('span').text(user.name); 
 
     $('.link-p').append(clonedObject.html()); 
 
    }); 
 
    
 
    function alertWhenClicked() { 
 
    \t alert(this.dateofbirth); 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<div class="clone-block" > 
 
\t <p>Username : <span></span></p> 
 
</div> 
 
<div class="link-p" ></div> 
 
</body> 
 
</html>

출처

2017-11-10 user3522109

$('.link-p').append(clonedObject.html());

당신은 HTML로 객체를 회전하고 그 이벤트 바인딩의이 없을 것이다, DOM에 추가되고에게주십시오 그 위에. .html()

추가 참고 사항으로 위임 바인딩을 살펴 봐야하므로 모든 요소에 이벤트 바인딩을 지정할 필요가 없습니다.

$.each(arrayOfObjects, function (ind, user){ 
    var clonedObject = documentSelector.clone(true, true); 
    //put the user on the element as a data object for easy reference 
    clonedObject.data('user', user); 
    clonedObject.find('span').text(user.name); 
    $('.link-p').append(clonedObject); 
}); 

//delegate bind the click event to the parent for the future child elements 
$('.link-p').on('click', '.clone-block', alertWhenClicked); 

function alertWhenClicked() { 
    alert($(this).data('user').dateofbirth); 
}

출처

2017-11-10 18:27:30 Taplar

jquery를 사용하여 복제 된 개체에 클릭 이벤트를 추가 할 수 없습니다

답변

관련 문제