jQuery onclick selector doesn't work

Question

Hi, I have a selector:

$("input[type='button'][onclick^='save']")

and it works in FF but on IE...

There is something wrong with onclick selector part. Is there a way to make cross-browser workaround?

Thanks Pawel

edit:

    $("img[src$='scroll.gif']").click(function(){
    var targetOffset = $("input[type='button'][onclick^='save']").offset().top; 
    $("html,body").animate({scrollTop: targetOffset}, 400);
});

Answer 1

It should be like :

$("input[type=button]").click(function(){
//do something
});

You should put this in document ready function

EDIT is this what you want?

$('img[src="scroll.gif"]').click(function(){
        var targetOffset = $(this).offset().top; 
        $("html,body").animate({scrollTop: targetOffset}, 400);
    });

Answer 2

Do you have more than one button that is a save button? If not, why don't you just assign your button an id? That makes it a lot simpler, and the id selector, which wraps document.getElementById() is very cross-platform. Then, all you need is $("#buttonID").

EDIT: Given the OP's criteria, I'd suggest a class (just for use as a selector) such as "jumpToSave". Each button should have that class, and then the selector could use $(".jumpToSave")

Answer 3

You can't look for a value like that in event attributes. The browser creates a function from the string value in the attribute.

If you have an attribute like this:

onclick="save();"

The attribute contains a function reference rather than a string. If you read the attribute and get the value as a string, you get the code of the function.

When reading the attribute value in Firefox, this is what you get:

function onclick(event) { save(); }

When reading the attribute in Internet Explorer, this is what you get:

function onclick(){save();}

You have to use some other attribute to identify the button.

Answer 4

You can create a custom selector (probably very inefficient though):

$.extend($.expr[':'], {
  onclick: function(node, index, args, stack) {
    var events = $(node).data('events');
    var fn = args[3];
    if (!events || !events.click) return false;
    for (i in events.click) {
      if (events.click[i].name == fn) return true;
    }
    return false;
  }
});

$("input[type='button']:onclick('save')")

function.name does not work in IE though, so you will have to jump through another hook using toString() and regexps. All in all, you are far better off manually maintaing a list of event handler names.

Edit: looking at your code snippet, there seems to be no reason at all to search for event handlers. Instead of wildly throwing attribute selectors around, use classes and ids to address your elements in a semantically meaningful way, e.g.

 <img id="scroll-icon" src="icons/scroll.gif" />
 <input id="submit-button" type="submit" onclick="save();" />

and then

$("#scroll-icon".click(function(){
  var targetOffset = $("submit-buttton").offset().top; 
  $("html,body").animate({scrollTop: targetOffset}, 400);
});