input type image click event in jquery

Question

I am trying to navigate to another page using jquery

Markup :

<input type="image" name="ImageButton1" id="btnCancel" src="../images/btn_cancel.gif" />

JS

 $('input[type="image"][id^="btnCancel"]').live('click', function () {
        window.location.replace('default.aspx');
 });

Page just refreshes, it does not navigate to desired page. when i change type=button it works.

How to achieve the same by keeping type as image only ?

Why 2 attribute selectors for a single element? you can only do it with `$("#btnCancel").` — Dhaval Marthak, Jun 26 '14 at 09:13
input type="image" acts like submit. Replace it with type="button" — Arvind Bhardwaj, Jun 26 '14 at 09:13
If `type="button"` works, then use it. Since you want to keep the image, style the button in CSS using the image as the background. — afaolek, Jun 26 '14 at 09:17

score 4 · Accepted Answer · answered Jun 26 '14 at 09:14

4

$("#btnCancel").on('click', function () {
        window.location.href = 'default.aspx';
});

answered Jun 26 '14 at 09:14

Nikhil Talreja

2,754
1
14
20

Why to use `href` over `replace` ? – Shaggy Jun 26 '14 at 09:19
Difference is only the way they manipulate browser history: http://stackoverflow.com/questions/7703689/difference-between-window-location-href-window-location-replace-and-window-loca – Nikhil Talreja Jun 26 '14 at 09:27

score 3 · Answer 2 · answered Jun 26 '14 at 09:14

3

Use preventdefault:

$('input#btnCancel').on('click', function (e) {
        e.preventDefault();
        window.location.replace('default.aspx');
 });

answered Jun 26 '14 at 09:14

Arvind Bhardwaj

5,231
5
35
49

score 1 · Answer 3 · answered Jun 26 '14 at 09:14

Us on instead of live...and prevent default to stop the default behaviour.

  $(document).on('click','input[type="image"][id^="btnCancel"]',function(e){
       e.preventDefault();
       window.location.replace('default.aspx');
  });

live is deprecated

input type image click event in jquery

3 Answers3