jQuery, 각 항목에 추가 할 클릭 이벤트 만 적용하십시오.

Question

$('div > .card-body > .text-muted').append('<div class="card-body" style="background-color:#292b2e;border-radius:5px;">'+data+'<a class="btn btn-secondary">Sell</a></div>').last().on('click', function(){ 
    console.log("SellClicked " + hatassetid); 
    window.location.href = "https://domain/asset/"+assetid+"/sell"; 
}); 

조치를 수행 할 수있는 새 버튼을 추가하는 jQuery 스크립트를 해결하는 데 어려움을 겪고 있습니다. 버튼이 나타나고 모두 클릭 할 수 있습니다. 그러나 단추 중 하나를 클릭하면 추가 된 모든 단추가 SellClicked 함수를 실행하여 클릭 한 단추에 관계없이 매번 실행할 수있는 마지막으로 찾은 항목으로 끝납니다.

클릭 기능이있는 클릭 가능한 버튼을 추가하는 신뢰할 수있는 방법이 있습니까?

출력이 항상 응답합니다.

당신은 그것의 찾을거야, 84600은 84683이 84703이 85056은 85488이 86296이 87379 은 88,709 당신이 당신의 .on 내에서에 console.log($(this))을 할 경우 90299은 96525

Answer 1

을 SellClicked SellClicked SellClicked SellClicked SellClicked SellClicked SellClicked SellClicked SellClicked SellClicked 버튼이 아닌 .text_muted 인 부모 요소를 반환합니다. 이는 .on() 메서드가 단추가 아닌 $("div > .card-body > .text-muted") 인 선택기에 적용 되었기 때문입니다.

이 의미는 버튼이 실제로 작동하지 않고 '.text_muted'작업의 이벤트 리스너입니다 (테스트 및 확인 됨). 또한 루프의 반복마다이 상위 요소에 대한 새 이벤트 수신기를 생성하므로 반복되는 출력을 의미합니다.

것은이 문제를 해결하려면, 나는 ".) (에서) .last (이하"드롭을 추가하는 동안 버튼에 클래스를 추가하고 대한 이벤트 리스너를 만들 것입니다 :

$('div > .card-body > .text-muted').append('<div class="card-body" style="background-color:#292b2e;border-radius:5px;">'+data+'<a class="btn btn-secondary myButtonClass">Sell</a></div>') 

$(".myButtonClass").click(function(){ 
    <do something> 
}) 

보너스 : 코드가 약간 불완전하기 때문에 'hatassetid'가 어디에서 왔는지 확신 할 수 없지만 버튼 클릭으로 데이터를 전달해야하는 경우 애셋 ID (또는 무엇이든)를 추가하면됩니다. 을 "데이터"속성으로 사용하고 이벤트 리스너 함수에서 액세스합니다.

<a class="btn btn-secondary myButtonClass" data-assetId='+assetID+'></a> 

다음 :

그것은 [최소한의 완전하고 검증 예]에 관련 코드를 보여줍니다 그래서 우리가 (당신이 당신의 질문을 업데이트하십시오 수 있습니다, 더 나은 당신을 도울하기 위해서는

$(".myButtonClass").click(function(){ 
     var assetId = this.data('assetid') //please note, data() attributes must be selected using all lowercase characters 
    }) 

See it in Plunker