how to remove onclick event of anchor?

Question

I want to remove onclick attribute but not work I used jQuery but onclick event not remove here is my code:

 function  getBusinesses(page){
                if(page==0){
                    alert("you are already on First Page");
                    $("#previous a").removeAttr("onclick");
                }
                else{
                    $.ajax
                    ({
                        type: "POST",
                        url: "getbusiness.php",
                        data: "page="+page,
                        success: function(msg)
                        {
                            $("#new2").html(msg);

                        }
                    });
                }
            }
 <div id="new34"  style=" width:1028px; height:15px; background#fff; float:left;">
                       <div id="previous" style="float:left; width:20px;">

<a onclick="getBusinesses(1)" href="javascript:void(0)">&lt;</a></div>

Remove the attribute from the element in the .html file, then bind the event using javascript. — Kevin B, Feb 20 '14 at 15:59
Can you please add the proper code?? I think its not added properly — Grish, Feb 20 '14 at 16:00
this is not duplicate since OP is using a correct method but has a logical error in his code. — Volkan Ulukut, Feb 20 '14 at 16:06
@arif your code is working fine. Did you check it with the value of page with 0 ? — Adesh Pandey, Feb 20 '14 at 16:14
you obviously have something else going on, or your question is not clear. Since you neged my reply and what not, here you can see; Works fine for me http://jsfiddle.net/SpYk3/wUFm6/ — SpYk3HH, Feb 20 '14 at 16:21
@VolkanUlukut it is a copy till he comes up with a different problem. Fact is, his code works as intended. So the problem is not in the question. Thus the question is wrong, or considered a copy of nearest matching *issue* — SpYk3HH, Feb 20 '14 at 16:24

score 0 · Answer 1 · answered Feb 20 '14 at 16:02

0

if you are trying to stop a click event working, perhaps try the following...

$('#yourElement').on('click', function(){
    return false
});

answered Feb 20 '14 at 16:02

TimPalmer

119
5

score 0 · Answer 2 · answered Feb 20 '14 at 16:04

0

since you are executing getBusinesses(1), your $("#previous a").removeAttr("onclick"); code will never work cause you wrapped it inside if(page==0){ change if to if(page<=1){ and it will work as expected.

answered Feb 20 '14 at 16:04

Volkan Ulukut

4,113
1
17
35

Onheiron · Answer 3 · 2014-02-20T17:08:28.980

I think the worst part of your code is that onclick attribute inside the <a> tag.

Since you're using jQuery in your code, you sure should use it to bind/unbind click handlers to DOM elements without those messy html attributes.

HERE'S HOW YOU CAN TRIGGER YOUR FUNCTION ONCLICK

$("#previous a").click(function(e){

     // this is so it prevents the default 
     // behavior of an anchor redirecting to href
     e.preventDefault
     // triggers the function. I imagine you have a 
     // pagesLeft counter that will count down
     getBusinesses(pagesLeft)

})

NOW MODIFY YOUR JS FUNCTION TO UNBIND THE HANDLER WHEN pagesLeft RECHES 0

var pagesLeft = 3 // any you need, you get from somewhere    

function  getBusinesses(page){

    if(page==0){
         alert("you are already on First Page");
         // See here i use jQuery .unbind('click')
         $("#previous a").unbind('click');
    }
    else{
        pagesLeft--       
        $.ajax({
            type: "POST",
            url: "getbusiness.php",
            data: "page="+page,
            success: function(msg)
            {
                 $("#new2").html(msg);

             }
        });
    }
}

HERE IS A WORKING FIDDLE

EDIT

As a whole so you see the full changes

<div id="new34"  style=" width:1028px; height:15px; background#fff; float:left;">
    <div id="previous" style="float:left; width:20px;">
        <a href="#">&lt;</a><!-- see here no onclick and href="#" -->
    </div>
</div>

var pagesLeft = 3 // any you need, you get from somewhere    

function  getBusinesses(page){

    if(page==0){
         alert("you are already on First Page");
         // See here i use jQuery .unbind('click')
         $("#previous a").unbind('click');
    }
    else{
        pagesLeft--       
        $.ajax({
            type: "POST",
            url: "getbusiness.php",
            data: "page="+page,
            success: function(msg)
            {
                 $("#new2").html(msg);

             }
        });
    }
}

$("#previous a").click(function(e){

     // this is so it prevents the default 
     // behavior of an anchor redirecting to href
     e.preventDefault
     // triggers the function. I imagine you have a 
     // pagesLeft counter that will count down
     getBusinesses(pagesLeft)

})

LAST EDIT

If you want to keep your original code here's how it'd look, although it has some major holes in it

<div id="new34" style=" width:1028px; height:15px; background#fff; float:left;">
    <div id="previous" style="float:left; width:20px;">
       <!-- how do you set getBusinesses(1) with 1 as argument? -->
       <a onclick="getBusinesses(1)" href="javascript:void(0)">aaa</a></div>

<script> 
    function  getBusinesses(page){
         if(page==0){
             alert("you are already on First Page");
             $("#previous a").removeAttr("onclick");
         }
         else{
              // Here you should decrement the argument of getBusinesses
              // but how do you do it?
              $("#previous a").attr("onclick","getBusinesses(0)");
              $.ajax
              ({
                  type: "POST",
                  url: "getbusiness.php",
                  data: "page="+page,
                  success: function(msg)
                  {
                      $("#new2").html(msg);  
                  }
              });
          }
      }
 </script>

HERE THE FIDDLE FOR THIS LAST EDIT