Overriding default behavior of links using JQuery and JavaScript

Question

I'm trying to override all 'a' tags in a document with a specific class to prevent their default behavior and send a javascript alert. Here is my code so far:

$('.specific-class').click(function (event) {
    event.preventDefault();
    event.onclick('alert("hello world")');
});

This code stops the links from firing, as it should, but it doesn't send my 'hello world' message.

Does anyone know the appropriate syntax to make the alert fire when the links are clicked? Let me know if I can provide any additional information!

Elias Nicolas · Accepted Answer · 2015-09-18 03:36:04Z

1

Your error was using event.onclick(); instead of just alert() which will fire when you click Here is the snippet:

$('.specific-class').click(function (e) {
    e.preventDefault();
    alert("hello world");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="specific-class">hi you, click me.</div>

answered Sep 18, 2015 at 3:36

Elias Nicolas

74014 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tushar · Accepted Answer · 2015-09-18 03:31:29Z

1

Use alert inside handler as this function will be executed on the click of anchor.

$('.specific-class').click(function (event) {
    event.preventDefault();
    alert("hello world");
});

Or you can also update the onclick attribute value on page load

$(document).ready(function() {
    $('.specific-class').attr('onclick', 'alert("Hello World!"); return false;');
});

edited Sep 18, 2015 at 3:31

answered Sep 18, 2015 at 3:26

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Collectives™ on Stack Overflow

Overriding default behavior of links using JQuery and JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related