In a recent blog entry, we explained how to add custom code to ribbon buttons and how to cancel the event bubbling. This works for the majority of buttons, but doesn't work for the Preview Merge Results button, because of an anonymous Javascript function.

In this case, the complete node must be cloned to remove the event handlers. Then, all the required events can be rewired. The following code uses jQuery to store the parent node, clone the button and to append it to the parent element.

<script>
        // wait until the complete ribbon is loaded
        TXTextControl.addEventListener("ribbonTabsLoaded", function (e) {
                attachEvents();
        });

        function attachEvents() {
                // store the parent element
                var parent = $("#tglBtnPreviewMergeResults").parent();
                // clone and append the element to the parent
                $("#tglBtnPreviewMergeResults").clone().appendTo(parent);
                // remove the old element
                $("#tglBtnPreviewMergeResults").remove();
                // rewire required events
                $(document).on("click", "#tglBtnPreviewMergeResults",
                        function () {
                                alert("Custom Preview");
                        });
        }
</script>

Happy coding!