html dataset id를 사용하는 정의되지 않은 변수

Question

이 질문은 제가 앞서 질문 한 Giving an element multiple names/id's 질문 중 계속됩니다. 두 번째 대답은 요소에 여러 속성을 부여하는 것이 더 좋은 방법임을 보여줍니다.

그러나이 방법을 내 작업에 적용한 후. 내 javascript 변수는 정의되지 않았습니다.

내 HTML :

<a data-toggle="modal" data-id="prodModal" data-presId="<?php echo $selectPresForJs->valueof('pres_id'); ?>" data-prodId="<?php echo $prod->prod_id; ?>" data-target="#prodModal" class="image_modal" > 
        <img class="image-modal" style="width: 192px; height:192px;" src="<?php echo $prod->prod_icon; ?>"> 
        <span ><h2 style='color:#2468A6'><b><?php echo $prod->prod_name ?></b></h2></span> 
       </a> 

$(document).ready(function(){ 



$('#prodModal').click(function() { 


     var ajaxprodId = $('#prodModal').data('prodId'); 
     var ajaxpresId = $('#prodModal').data('presId'); 
       /*Console Prints the variables as undefined*/ 
      console.log(ajaxprodId); 
      console.log(ajaxpresId); 

     $.ajax({ 

     url: "path/to/file/Presentation.php", 
     type: "POST", 
     data: {prodId : ajaxprodId,presId:ajaxpresId} 


     ,success: function(data){ 
     console.log("Success was achieved"); 
     document.getElementById("modal_content").innerHTML = "Works"; 
     }, 
     error: function(data){ 
      console.error("The action was unsuccessfull"); 
      alert(data); 

     } 


    }); 
}); 


}); 

1는 어떻게 해결하는 것입니다 내 자바 스크립트/변수 ajaxprodId 및 ajaxpresId이 정의되지 않도록 코드를 변경?

2. 현재 위치는 모달이 열린 후 닫히고 다시 열리기 때문에 올바른 위치는 아약스가 innerHTML을 대체해야합니다.

Answer 1

선택자 $('#prodModal')을 사용할 때 id이 prodModal으로 설정된 DOM 요소를 참조하고 있습니다. 그 id은 data-id과 다릅니다. 당신이 $('#prodModal')을 사용하는 경우 귀하의 요소는 ID가없는 id