CODEWITHSUNDEEP
jqueryjquery-selectors
dragonfly
dragonfly

Reputation: 17773

jQuery onclick selector doesn't work

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

Upvotes: 5

Views: 2991

Answers (4)

justkt
justkt

Reputation: 14766

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")

Upvotes: 3

Tgr
Tgr

Reputation: 28160

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);
});

Upvotes: 1

Guffa
Guffa

Reputation: 700192

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.

Upvotes: 2

ant
ant

Reputation: 22948

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);
    });

Upvotes: 6

Related Questions