JSFiddle - React, Tailwind, and code Playground

HTML

<a onclick="alert('Problem: this event should have been replaced!');">I'm an anchor, click me!</a>
<br/>
<br/>

CSS

.error, .success, .code { font-family: "Courier New", Courier, monospace; }
.error, .success { font-weight: bold }
.error { color: red; }
.success { color: green; }
.code { color: gray; }

JavaScript

// Output of .prop('onclick') and .attr('onclick'), and results of jQuery('a[onclick]') before DOM manipulation
var prop_before = jQuery('a').prop('onclick');
var attr_before = jQuery('a').attr('onclick');
var results_before = jQuery('a[onclick]').length;

// Change the onclick event directly in the DOM
jQuery('a[onclick]')[0].onclick = function(event){
    alert('replaced event alert');
}

// Output of .prop('onclick') and .attr('onclick'), and results of jQuery('a[onclick]') before DOM manipulation
var prop_after = jQuery('a').prop('onclick');
var attr_after = jQuery('a').attr('onclick');
var results_after = jQuery('a[onclick]').length;

// Check for errors
var attr_error = typeof attr_after == 'undefined' ? ' <span class="error">ERROR</span>' : ' <span class="success">OK</span>';
var results_error = results_after != results_before ? ' <span class="error">ERROR</span>' : ' <span class="success">OK</span>';

// Write the debug information
jQuery(document.body).append(
    '<b>Before DOM manipulation:</b><br/>' +
    '- Output of .prop(\'onclick\'): <span class="code">' + prop_before + '</span><br/>' +
    '- Output of .attr(\'onclick\'): <span class="code">' + attr_before + '</span><br/>' +
    '- Results of "jQuery(\'a[onclick]\'): ' + results_before + '<br/>' +
    '<br/>' +
    '<b>After DOM manipulation:</b><br/>' +
    '- Output of .prop(\'onclick\'): <span class="code">' + prop_after + '</span><br/>' +
    '- Output of .attr(\'onclick\'): <span class="code">' + attr_after + attr_error + '</span><br/>' +
    '- Results of "jQuery(\'a[onclick]\'): ' + results_after + results_error + '<br/>'
);