Return false with onclick attribute

Question

I have this code:

<ul>
    <li class="foo" onclick="alert('Hello')">a</li>   
    <li class="foo" onclick="alert('Hello')">b</li>
    <li class="foo" onclick="alert('Hello')">c</li>
</ul>

I want to prevent the default action alert() when click in <li> with text "a", and I use this code:

$(document).on('click','.foo', function(){
    if ($(this).text()=='a')
        return false;
});

But this doesnt work: http://jsfiddle.net/Trk6W/10/

Is there a solution only modifying the javascript?

Updated: I dont wanna remove the attribute onclick because the values of li can change

You can't have multiple elements with the same ID, use a class. — Barmar
– Barmar, Commented Jun 13, 2013 at 16:59
The onclick attribute code is running before the jQuery click handler. You can't stop something that has already happened. — Barmar
– Barmar, Commented Jun 13, 2013 at 17:03
I dont wanna remove the onclick attribute becasue the values of the <li> can change. BTW, i updated the answer with 'class' instead 'id' — Michael Aguilar
– Michael Aguilar, Commented Jun 13, 2013 at 17:10
@MichaelAguilar Then don't use the onclick attribute - store data associated with the element in data-* attributes. For example <li class="foo" data-something="whatever">a</li>. You can then get the stored value with $(element).attr("data-something") or $(element).data("something"). Don't try and mix basic and jQuery event handling — Ian
– Ian, Commented Jun 13, 2013 at 17:11

epascarello · Accepted Answer · 2013-06-13 17:15:23Z

6

The problem here is the jQuery code runs after the onclick attribute. So there is no way to make it work with the way you currently have it set up. The solution would be to look for the onclick elements and move it to another event, and have the onclick that you add dynamically trigger than event.

$(".foo").each( function() {
   this._onclick = this.onclick;
   this.onclick = null;
});


$(document).on('click','.foo', function(){
    if ($(this).text()!=='a') {
        this._onclick.apply(this,arguments);
    }
});

JSFiddle

The problem with this method is, if the content is added dynamically, you would have to call the code that converts the click.

edited Jun 13, 2013 at 17:15

answered Jun 13, 2013 at 17:03

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

1 Comment

Michael Aguilar Over a year ago

a very good answer and solution. I think is the best solution

moonwave99 · Accepted Answer · 2013-06-13 17:02:55Z

0

Besides the unique id caveat, just remove the onclick attr:

Markup:

<ul>
  <li class="foo" onclick="alert('Hello')">a</li>   
  <li class="foo" onclick="alert('Hello')">b</li>
  <li class="foo" onclick="alert('Hello')">c</li>
</ul>

JS:

$('.foo').map(function(){ 
  if($(this).text() == 'a')
    $(this).removeAttr('onclick')
});

answered Jun 13, 2013 at 17:02

moonwave99

22.9k3 gold badges49 silver badges71 bronze badges

3 Comments

epascarello Over a year ago

BUT the OP wants it to fire!

Brendan Bullen Over a year ago

But the OP said I want to prevent the default action alert()

moonwave99 Over a year ago

@epascarello now I removed it just for the desired element. If user wants to retain a copy of original event, he may do like in the solution you proposed.

Danilo Valente · Accepted Answer · 2013-07-06 04:41:18Z

-1

You could set a class for your duplicated elements, and use the following snippet:

<ul>
    <li class="foo">a</li>
    <li class="foo">b</li>
    <li class="foo">c</li>
</ul>
<script>
    $('.foo').on('click',function(){
        if($(this).text() === 'a'){
            return false;
        }
        // Whatever you want here.
    });
</script>

edited Jul 6, 2013 at 4:41

Danilo Valente

11.4k8 gold badges55 silver badges71 bronze badges

answered Jun 13, 2013 at 17:12

thepanuto

7835 silver badges17 bronze badges

1 Comment

epascarello Over a year ago

You removed the onclick events that are on it and jQuery runs after the onclick that is on the element so your solution fails.

Collectives™ on Stack Overflow

Return false with onclick attribute

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related