javascript - jQuery 脚本未执行

Question

我有一个用 jQuery 修改的按钮，以更改它的 id 和/或类。当它有一个特定的类并且用户单击按钮时，它应该执行以下脚本:

$(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;

    });
  });        
});

但是，它甚至不会执行首先要做的警报。

以下是更改按钮的 id 和类的代码:

$(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);

    });

}); 

按钮本身未经修改:

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

这是一个fiddle整个页面。

有人懂吗？

Answer 1

最可能的解决方案是您需要使用 jQuery 的 live 函数，而不是 click。

使用点击处理程序，它会按原样注册页面上的所有内容，并且不会为将来将具有给定选择器的元素注册事件。

live通过将事件处理程序添加到现在和将来的所有元素来解决此问题。

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

更改此行:

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

至

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

应该可以解决你的问题。

Here's a working jsFiddle