Is there any way to capture an event when the DIV that is highlighted closes? (actually changes the display to none). If I click outside the element it closes and I need to do something when this happens. The Primefaces element does not have any associated events, and I do not know if CSS JS has any way of capturing this. - I'm careful if more information is required
You can add an observer to monitor the changes in a node. The following example is a modification of this link
depending on what you want to do, you modify it.
<body>
<div id='my-div'>
<p>este es mi div</p>
</div>
<button id='my-button' onclick="hide('my-div')">esconder</button>
<script type="text/javascript">
function hide(id){
if(document.getElementById(id).style.display!='none'){
document.getElementById(id).style.display='none';
}
}
var targetNode=document.getElementById('my-div');
var config = { attributes: true, childList: false };
var callback = function(mutationsList) {
for(var mutation of mutationsList) {
if (mutation.type == 'attributes') {
if(mutation.attributeName=='style'){
if(targetNode.style.display=='none'){
console.log('el elemento se ocultó');
//acá va nuestra función
}else{
console.log('el elemento se hizo visible');
}
}
}
}
};
var observer = new MutationObserver(callback);
observer.observe(targetNode, config);
</script>
</body>