jQuery look for onClick value and replace on dynamic html

The way I typically do something like this would be to define a custom data attribute on the links, and then listen for a click of any of the links. When the click event fires and my function runs, I can use the data attribute on the clicked link referenced in the event to do as I need.

I find event management this way is cleaner than using the onClick on the element itself.

Here's what that might look like:

<a href="#" class="replaced_btn" data-message="Click OK to cancel this booking.\n\nCancellation fees may be payable.\nSee the Terms and Conditions.">Cancel booking</a>
<a href="#" class="replaced_btn" data-message="Do you want to cancel this service?\nClick \'OK\' to continue.  Click \'Cancel\' if you do not wish to proceed.">Cancel service</a>

<script type="text/javascript">
    $("a.replaced_btn").on("click", function (e) {
        //Let the event bubble, but prevent the anchor from jumping to the top of the page
        e.preventDefault();

        //React to the specific link
        alert($(e.target).data("message"));
    });
</script>

Please note that code is untested.

Hopefully this helps resolve your issue.

Documentation for using jQuery's .data() method to get HTML5 data attributes: https://api.jquery.com/data/#data-html5

Documentation on getting the clicked-element from the jQuery event object: https://api.jquery.com/event.target/

Edit 1

You can also use an attribute to switch functionality, something I find super useful:

<a href="#" class="replaced_btn" data-type="cancel-booking">Cancel booking</a>
<a href="#" class="replaced_btn" data-type="cancel-service">Cancel service</a>

<script type="text/javascript">
    $("a.replaced_btn").on("click", function (e) {
        //Let the event bubble, but prevent the anchor from jumping to the top of the page
        e.preventDefault();

        //React to the specific link
        switch ($(e.target).data("type")) {
            case "cancel-booking":
                //Handle this case
                break;
            case "cancel-service":
                //Handle this case
                break;
        }
    });
</script>

Please note this code is also untested.

Edit 2

So if you use this snippet, it will add the data-type attributes for you, and then you can use that do whatever you want that requires identifying the link, including what I wrote above.

$("a.replaced_btn").each(function (idx, el) {
    if ($(el).attr("onclick").indexOf("Click OK to cancel this booking") > -1) {
        $(el).data("type", "cancel-booking");
    } else if ($(el).attr("onclick").indexOf("Do you want to cancel this service") > -1) {
        $(el).data("type", "cancel-service");
    }
});

Alternatively, skip the adding of a data-type attribute and handle you link-specific logic inside the function.

Edit 3

Here's a JSFiddle showing that you can loop through the links and perform separate functions on them depending on the contents of their onclick attribute:

https://jsfiddle.net/2xa7xk32/

(Also changed the second if in Edit 2 to be an else-if)

If the href attribute is the only thing that you can depend on in the a elements to be unique, then that is what you'll need to use. Following is a simple example, but since we don't know what the other link looks like, or all of the other links on the page, it is impossible to know exactly what key off of in the URL. It will likely need to be changed to use a regular expression.

$("a").click(function(){
    if(this.href.indexOf('booking') != -1){
    alert("Booking link clicked")
  }
    if(this.href.indexOf('service') != -1){
    alert("Service link clicked")
  }
return false;
});

Also, you'll need to remove the existing click handlers with something like this first:

  $("a").each(function() {
    if (this.href.indexOf('booking') != -1 || this.href.indexOf('service') != -1) {
      $(this).attr("onclick", "").unbind("click");
    }
  });

Otherwise, the inline click handler and your click handler will both run.