I have set up a group of DOM elements of class .defect. These elements are set up using D3 and have an AJAX event bound to them such that when they are clicked, php is executed that either fetches images via ftp (if they don't exist on the local server) or fetches them from the local server. Then a small web page is built with thumbnails of the images. The D3 binding is as follows:
.on("click",function(d) {
div.transition()
.duration(1)
.style("opacity",0);
$.ajax({
type: 'POST',
url: 'get_pictures.php',
data: {lot: d.lot,wafer: d.wafer,layer: d.layer, defectId: d.defectId},
dataType: 'json',
success: function(data) {
createImagePage(data, d.layer, d.lot, d.wafer, d.fineBin);
},
error: function() {
alert('Error');
}
})
});
Because of the way D3 binds the data I have set up a separate event listener for the click event on these elements as well in hopes of executing blockUI code:
$(document).on('click',".defect",function() {
$.blockUI({ message: "<h4>Getting images ...</h4><img src='img/wait.gif'/>"});
})
The problem that I am running into is that the blockUI is executed sometimes and other times it is not. I verified that the elements all have the .defect class, but not all of them trigger the blockUI. I'm hoping someone else might have some insight into what I am missing. Thanks in advance.
