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, Jun 13 '13 at 16:59
http://stackoverflow.com/questions/1756425/prevent-onclick-action-with-jquery — Adil Shaikh, Jun 13 '13 at 17:00
The `onclick` attribute code is running before the jQuery click handler. You can't stop something that has already happened. — Barmar, Jun 13 '13 at 17:03
I dont wanna remove the onclick attribute becasue the values of the `
@MichaelAguilar Then don't use the `onclick` attribute - store data associated with the element in `data-*` attributes. For example `

epascarello · Accepted Answer · 2013-06-13T17:15:23.770

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.

a very good answer and solution. I think is the best solution — Michael Aguilar, Jun 13 '13 at 17:19

score 0 · Answer 2 · answered Jun 13 '13 at 17:02

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 '13 at 17:02

moonwave99

21,957
3
43
64

1

BUT the OP wants it to fire! – epascarello Jun 13 '13 at 17:04
But the OP said `I want to prevent the default action alert()` – Brendan Bullen Jun 13 '13 at 17:07
@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. – moonwave99 Jun 13 '13 at 17:11

score -1 · Answer 3 · edited Jul 06 '13 at 04:41

-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 06 '13 at 04:41

Danilo Valente

11,270
8
53
67

answered Jun 13 '13 at 17:12

thepanuto

783
5
17

1

You removed the onclick events that are on it and jQuery runs after the onclick that is on the element so your solution fails. – epascarello Jun 13 '13 at 17:13

Return false with onclick attribute

3 Answers3