Changing Button ID with jQuery

Question

I have a form with a button whose initial value is 'Submit' and its ID is 'submit1' which is used by this:

$( function(){
$("#submit1").click(function () {
    alert("i got ");
    var dname = $("#dname").attr('value');
    if(jQuery.trim(dname).length == 0){
        $("#dnametd").append("<span id='requiredsp' class='vanadium-advice vanadium-invalid'>Thissss is a required field.</span>");
        $("#dname").keyup(function () {
            $("#requiredsp").remove();
        });
    }
    else{
var dname = $("#dname").attr('value');
var symptons = $("#symptons").attr('value');
$.ajax({
                type: "POST",
                data: "method=" +"addDisease"+"&dname="+dname+"&symptons="+symptons+"&status="+"y",
                url:  "classes/disease_type.class.php",
                success: function(){
                gettables();
                    }
               }); 
        $("#newformreg").hide( { direction: "left" }, 1500);
        $("#dname").val('');
        $("#symptons").val('');
    }

    });
});

Later on I get data from the server and I get those data in the above form with a hidden textbox for id and also I change the buttons value to Update and id to update as below.

  function doEdit(id){
        $.ajax({
                type: "POST",
                data: "method=" +"getDisease"+"&did="+id,
                url:  "classes/disease_type.class.php",
                success: function(myVar){
                    $("#newformreg").show( { direction: "left" }, 1000);
                    arr3=myVar.split('%');
                    $('<input>').attr({type:'hidden',id:'did'}).appendTo("#insertForm");
                    $("#did").val(arr3[0]);
                    document.getElementById("dname").value=arr3[1];
                    //$("#dname").val(arr3[1]);
                    $("#symptons").val(arr3[2]);
                    $("#submit1").prop({id:'update',value:'Update'});
                    //document.getElementById("submit").value="Update";
                    //document.getElementById("submit").id="update";
                },
                }); 
                            }

            $( function() {
            $("#update").click(function () {
            var upvalue = $("#update").attr('value');
            alert("updateclick");
            alert(upvalue);
            var dnamee = document.getElementById("dname").value;

            if(jQuery.trim(dname).length == 0){
                $("#dnametd").append("<span id='requiredsp' class='vanadium-advice vanadium-invalid'>Thissss is a required field.</span>");
                $("#dname").keyup(function () {
                    $("#requiredsp").remove();
                });
            }
            else{
                alert("proper");
            var did = $("#did").attr('value');      
            var dname = $("#dname").attr('value');
            var symptons = $("#symptons").attr('value');

                $.ajax({
                type: "POST",
                data: "method=" +"updateDisease"+"&dname="+dname+"&symptons="+symptons+"&did="+did+"&doUpdate="+"edit",
                url:  "classes/disease_type.class.php",
                success: function(){
                    $("#msgdiv").addClass("msg success").add('<span>Record Updated Successfuly</span>');
                    }
               }); 
            }
        }); 
    alert("out");
           });

But even after doing this, whenever I click on update it executes the above submit button's function and doesn't update. Also when my page opens it gives me above alert("out");. I don't understand what's going on.

Answer 1

You are using $("#update").click() to bind a click event, but the "update" id does not exist when the page loads for the first time.

In order to bind events dynamically you need to use the .on() method. look here for further details.

EDIT:

Your code is not writtent very well, I'd suggest you give the button one ID (#submitBtn) and give it a class of update/save. then you do this:

$("#submitBtn").click(){
    if ($(this).hasClass('save')){
    //do save code
    }
    else{
      //do update code
    }
}

Answer 2

alert("out");

is working fine.As you are using it in code $( function() { that means on ready.