CODEWITHSUNDEEP
javascriptjquery
Ashwin Rajagopal
Ashwin Rajagopal

Reputation: 23

jquery on click event not firing when using jquery 1.11.3.min.js .

As per below html controls , if I try to change the "id" of Submit to "Save" , click of Save is not working then.

HTML 

<html>
<head>
</head>
<body>
<input type="button" value="Submit Request" id="Submit"class="buttonclass"/>               
<input type="button" id="cancel" value="Cancel" class="buttonclass" />
</body>
</html

JS CODE BELOW : 

   $("#Submit").on({
    click: function () {             

        $(this).attr('id', 'Save');           
        return false;
    }
   });

   $("#Save").on({
    click: function () {            
       alert("Save Event Fired"); 
    }
   });

Upvotes: 1

Views: 1901

Answers (1)

wot
wot

Reputation: 845

You aren't binding the click event to #Save because the id #Save only exists AFTER the Submit button has been pressed (there is no #Save on load). But if you put the click event on the body and only accept the #Save, you can bubble the event up and handle it there.

$("#Submit").on('click', function (e) {
    e.stopPropagation()

    alert("Submitted Fired"); 
    $(e.target).attr('id', 'Save');           
    $(this).unbind('click');
})

$("body").on('click', '#Save', function (e) {
    alert("Save Event Fired"); 
})

https://jsfiddle.net/6Lchafwa/1/
If this is the answer you are looking for, press the green tick on the left.

Upvotes: 2

Related Questions