Read content of popup after opening

[samitalebi]

I'm working with Arcgis version 4.27 and want to set click function for the content of the popup after opening the popup. As I understand, the best way is "reactiveUtils" but doesn't work properly and the length of the "$(".tblInfoWindow").find("img.Question")" is zero. 

The code is:

reactiveUtils.watch(
() => mainView.popup.visible,
(visible) => {
if (visible) {
console.log($(".tblInfoWindow").find("img.Question").length);
$(".tblInfoWindow").find("img.Question").click(function () {
var layerID = $(this).attr("id").replace("question_layer", "");
var layerName = $.trim($(this).parent().text());

OpenQuestionLink(layerID, layerName);
});
}
}
);

How can I set click function for the content of the popup after opening that? Seems visible=true before opening the popup!

[LaurenBoyd]

Hi @samitalebi -

You can try to watch when the view.popup.selectedFeature changes using reactiveUtils: 

reactiveUtils.when(() => view.popup?.selectedFeature, () => {
  console.log(view.popup.selectedFeature)
});

Here is an example CodePen shows how to access that: https://codepen.io/laurenb14/pen/yLQRgGM?editors=1000 

If that doesn't work, could you please send a CodePen with an example of what you are trying to achieve?

[JoelBennett]

The issue appears to be that just because the visible property changes to true, it doesn't mean the content has yet been added to the popup, and therefore queryable through the DOM. Since the popup doesn't have the equivalent of a "content-ready" event, we have to be a little more creative. I recommend something like the following:

new MutationObserver(function() {
	if (popup.visible) {
		var button = document.querySelector("myButtonSelector");

		if ((button) && (button.dataset.addedclick != "true")) {
			button.dataset.addedclick = "true"; //flag to indicate we've set the handler, so action doesn't get repeated unnecessarily
			button.onclick = function() {
				//do something
			};
		}
	}
}).observe(popup.container, {childList:true,subtree:true});