Custom Pop-up, onClick is not rendering

[UgurcanErkal]

Hi guys,

I'm creating a custom pop-up, and the content is pure HTML. On that HTML content, I'm trying to put onClick but it is not rendering. 

    } else {
        if (filteredProductList[i].productType == 'Permit') {
            popUpContent += "<a class='slds-button slds-button_brand'  href='#' onClick='return false;'>Sold Out</a>";
        } else {
            popUpContent += "<a class='slds-button slds-button_brand' href='#' onClick='notifyMe('TEST')'>Notify Me</a>";
            popUpContent += "<input type='button' class='slds-button slds-button_brand' onClick='notifyMe('TEST')'>Notify Me</input>";
        }
    }
}

view.popup.open({
title: popUpTitle,
location: m_event.mapPoint,
content: popUpContent
});

But when I check the created pop up I'm not able to see this onClick rendered.

Is it forbidden by Esri to create an element with onClick?

[KenBuja]

Try using template strings instead. I can get an alert using this syntax

`<a class='slds-button slds-button_brand' href='#' onClick='alert("Sold Out");'>Sold Out</a>`

[JoelBennett · Accepted solution]

Yes, in version 4.14, ESRI added the HTML sanitizer which, among other things, prevents you from adding event handlers in your popup content.  See the final breaking change listed here.

Fortunately, if you prefer to decide for yourself what is and isn't permissible in your applications, it's fairly easy to bypass.  You'd just need to add the following somewhere near where your application starts up.

require(["esri/widgets/support/widgetUtils"], function(widgetUtils) {
	var sanitize = widgetUtils.renderingSanitizer.sanitize;

	widgetUtils.renderingSanitizer.sanitize = function(b, c) {
		return ((typeof b == "string") ? b : sanitize.call(this, b, c));
	};
});

[UgurcanErkal]

Thank you, this works as expected!

[emreaktas1]

@UgurcanErkal  merhaba;
aynı sorunla karsılasıyorum. Popup içine bir html etiketi örneğin button eklemek istiyorum. Yardımcı olurmusun

[ReneRubalcava]

You can manually create the DOM elements and add them to the custom content of your popup, which would be the recommended way to do something like this.

 https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html#content

popupTemplate: {
  title: "{name}",
  content: [
    {
      type: "custom",
      outFields: ["*"],
      creator(event) {
        const elem = document.createElement("div");
        const btn = document.createElement("button");
        btn.innerText = event.graphic.attributes.name;
        btn.addEventListener("click", () => {
          alert(event.graphic.attributes.description);
        });
        elem.appendChild(btn);
        return elem;
      }
    }
  ]
}

https://codepen.io/odoe/pen/QWBVKMM?editors=0010