jQuery script not executing

Question

I have a button that I modify with jQuery, to change it's id and/or class. And when it has a spesific class and user clicks the button, it should execute the following script:

$(document).ready(function() {
$(function() {
    $('.error').hide();
    $("#tilisiirtobtn").click(function() {
        alert("buttoni toimii");
        var Nimi =             $(".Nimi").val();
        var Osoite =           $(".Osoite").val();
        var Postinumero =      $(".Postinumero").val();
        var Postitoimipaikka = $(".Postitoimipaikka").val();
        var Puhelin =          $(".Puhelin").val();
        var Sahkoposti =       $(".Sahkoposti").val();
        var Filtteri =         /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
        $('.error').hide();
        if(Nimi == ""){
            $(".Nimi").focus();
            $("#Nimi-error").show();
            return false;
        }
        if(Osoite == ""){
            $(".Osoite").focus();
            $("#Osoite-error").show();
            return false;
        }
        if(Postinumero == ""){
            $(".Postinumero").focus();
            $("#Postinumero-error").show();
            return false;
        }
        if(Postitoimipaikka == ""){
            $(".Postitoimipaikka").focus();
            $("#Postitoimipaikka-error").show();
            return false;
        }
        if(Puhelin == ""){
            $(".Puhelin").focus();
            $("#Puhelin-error").show();
            return false;
        }
        if(Sahkoposti == ""){
            $(".Sahkoposti").focus();
            $("#Sahkoposti-error").show();
            return false;
        }

        $('.supernappula').attr('disabled', 'disabled');
      var data = $('#yhteystiedot').serializeArray();
      data.push( { name: 'cartContent', value: $('#emailedcart').html()});
      //alert (data);return false;
     $.ajax({
    type: "POST",
    data: data,
    url: "order/order.php",
    dataType: "html",
    error: function(){ if(confirm("Mitään ei näytä tapahtuvan. Päivitä sivu?") == true){ window.location.reload();} 
 },
    success: function() {
 alert("Onnistui");
        }


  });
  return false;

    });
  });        
});

However, it won't even execute the alert that is the first thing to do.

Here's the code that changes the id and class of the button:

$(function() {
    $("#paypal").click(function() {
        $(".yhteystiedot").slideUp(600);
        $(".toimitustapa").slideDown(600);
        $('form :input').val("");
        $('.supernappula').html("Maksa PayPalissa");
        $('.supernappula').addClass("simpleCart_checkout");
        $('.supernappula').attr("id", "checkoutbtn");
    }); 
    $("#tilisiirto").click(function() {
        $(".yhteystiedot").slideDown(600);
        $(".toimitustapa").slideDown(600);
        $('.supernappula').html("Tee tilisiirto");
        $('.supernappula').removeClass("simpleCart_checkout");
        $('.supernappula').attr("id", "tilisiirtobtn");

    }); 
    $("#postiennakko").click(function() {
        $(".yhteystiedot").slideDown(600);
        $(".toimitustapa").slideDown(600);
        $('.supernappula').html("Maksa postiennakolla");
        $('.supernappula').removeClass("simpleCart_checkout");
        $('.supernappula').attr("id", "postiennakkobtn");

    });


    $("#matkahuolto").click(function(){
        $(".maksu").slideDown(600);

    });
    $("#posti").click(function(){
        $(".maksu").slideDown(600);

    });

});

And the button itself without modifications:

<button type="button" id="checkoutbtn" class="simpleCart_checkout supernappula"></button>

Here's a fiddle of the whole page.

If anyone understands?

when jQuery loads, theres no such thing as #tilisiirtobtn. You could try binding it like this $("#tilisiirtobtn").live('click',fucnction() {}); because you add that id for it after DOM is ready — Tom
– Tom, Commented Sep 16, 2012 at 9:24
Yeah, when it loads, but #checkoutbtn is modified to #tilisiirtobtn... — user1537415
– user1537415, Commented Sep 16, 2012 at 9:30

Jamie Dixon · Accepted Answer · 2012-09-16 09:28:38Z

1

The most likely resolution to this is that you need to use jQuery's live function rather than click.

With the click handler, it registers everything on the page as it is and does not register the event for elements in the future which will have the given selector.

livesolves this problem by adding the event handler to all elements now, and in the future.

http://api.jquery.com/live/

Changing this line:

$("#tilisiirtobtn").click(function() {

to

$("#tilisiirtobtn").live('click', function() {

Should solve your problem.

Here's a working jsFiddle

answered Sep 16, 2012 at 9:28

Jamie Dixon

54.1k21 gold badges131 silver badges168 bronze badges

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

3 Comments

Jamie Dixon Over a year ago

Just glad you've got it sorted, whoever the answer came from first :)

Tom Over a year ago

my thoughts exactly, well explained. +1

Rab Khan Over a year ago

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

FluffyJack · Accepted Answer · 2012-09-16 09:22:42Z

0

You're double calling document ready. All you need is $(function()... not the wrapper of $(document).ready(function() { you've put around it.

answered Sep 16, 2012 at 9:22

FluffyJack

1,73210 silver badges15 bronze badges

3 Comments

user1537415 Over a year ago

@Dipaks, actually there was a double document ready, one was in a submitorder.js and one on the itself. Fixed that. However, that didn't fix the problem.

FluffyJack Over a year ago

Really I tried it out and it seemed to work, maybe I misunderstood the question and tried the wrong thing. What was meant to be fixed?

user1537415 Over a year ago

I was trying to modify an element that didn't exist when the page was loaded.

Collectives™ on Stack Overflow

jQuery script not executing

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related