JQUERY not working as expected

by 7 replies
9
I have a button id="button"
It has an onclick event that changes window location, as well as a .click bind in JQUERY
For the .click bind Im trying to do a .post call and if any data is returned cancel
the original onclick event.

I thought this following code would do it but its not working as expected:

Code:
$("#button").click(function (event) {
                                                              $.post('URL', function(data) {
                                                                                                                                             alert(data);
                                                                                                                                             if (data!=""){$('#button').unbind('click');}
                                                                                                                                             $('body').append(data);
                                                                                                                                            });
                                                              });
Any insight would be most appreciated.
#programming #expected #jquery #working
  • Silly question- does 'URL' have a real URL in your script?
  • JQuery/JavaScript is asynchronous. So you can't do the POST, and THEN cancel the click event. Technically, jQuery will send the POST, and then move to the next line without waiting to see what the server says.

    You need to stop the click even from happening in the first place by using 'return false;' or 'event.preventDefault();'

    Then after you get the results of POST from the server, if there's no data, change the window location (or anything else you want to do).
    • [1] reply
    • Yea I actually tried that. It didnt work either Thats why the event variable is in the click function call. Prior to the $.POST I was doing event.preventDefault() , but that didnt work, my guess is that it is because it was a button with an onclick event, this is an assigned event and not a default event, so event.preventDefault() will not work for it, return false would not work either,
      hence the $('#button).unbind(); I tried to put that prior to the post call as well without the if condition and it still would not prevent to onclick event.

      And yes URL is an actual URL
  • So maybe you could kind of reverse your thinking...remove the onclick binding and bind it if needed AFTER you evaluate the server response:
    Code:
    <button id="button" onclick="myredirect();"
    then:
    Code:
    function myredirect(){
  window.location somewhere;
}
$( function(){
  var  $button = $( '#button' ),
       storeval = $button[0].onclick;

  $button[0].onclick = null;

  $button.bind( 'click', function() {
      $.post( URL, function( data ){
         if ( '' != data ) {
            $( 'body' ).append( data );
         }
         else {
            $button.bind( 'click', storeval );
         }
      }
  }
});
    stupid editor removed the $ vars
  • No that wont work for my needs. Thanks for the suggestion however. I ended up making a different compromise that did suit my needs, however I would still love to know why this didnt work, just to know.
  • It didn't work because the onclick code executes before your jQuery click event binding. You can't unbind the event (the onclick) after it has fired, you can only intercept it.
    • [ 1 ] Thanks
    • [1] reply
    • Ahh well that makes sense then, see I thought the JQUERY click event would go before the onclick code. Thanks man.
Join the discussion

Next Topics on Trending Feed