Question

I’m using a third-party commenting plugin, and I would like to change the content of some of the buttons. This is straightforward for buttons with id‘s known ahead of time, but it also has buttons that don’t appear until a ‘Reply’ button is clicked. To be clear, these elements are not present when the page is loaded. They are inserted into the DOM following some event. For those elements, I only know a prefix of the id.

My first thought was to use .on, and to delegate to the children of the reply container, but the load event does not bubble, so this doesn’t work:

<script>
  $("#container").on("load", 'a[id|="reply-button"]', function(event) { $(this).html("different text");  } );
</script>

<div id="container">
  <a id="reply-button-42das56ds6d78a">some text</a>
</div>

What’s the next best thing?

Answer 1

“I know they will appear when the ‘Reply’ button is clicked. When that happens, new elements are inserted into the DOM, and I know what the prefix of the id of those elements will be.”

You could use something like the DOMSubtreeModified event to tell when elements are added, but that isn’t supported by all browsers. (In fact it has been deprecated.)

Or you could attach a click handler to the ‘Reply’ button:

$(document).ready(function() {
    // initialise plugin here, then:
    $("some selector for the reply button(s)").click(function(e) {
        // setTimeout(function() {        
        $('a[id|="reply-button"]').html("different text");
        // }, 10);
    });
});

jQuery ensures that multiple event handlers will run in the order they are bound, but of course this only applies to handlers added with jQuery. So if the third-party commenting plugin you are using also uses jQuery then just be sure it is initialised first and your own reply click handler should run afterwards and at that time it will be able to access the elements added by the plugin.

If the plugin doesn’t use jQuery you can’t be sure your click handler will run last so instead uncomment the setTimeout code I’ve shown above – it will wait a few milliseconds to give the plugin events time to run and then update the text.