CODEWITHSUNDEEP
javascriptjqueryhtml
SpiderMan
SpiderMan

Reputation: 27

Jquery button img change not working in IE and Firefox

The button img changes perfectly fine in chrome however in IE and Firefox it seems the code gets completely ignored.

$(function(){
    var counter = 0;
    $("#sortButton").bind('click', function(){
        if (counter == 0) {
            counter = 1;
            $("#sortButton").attr('src', '../../images/sortbttn.png');
        }
        else {
            counter = 0;
            $("#sortButton").attr('src', '../../images/sortbttnclosed.png');
        }
    });
});

<button class="btn btn-default dropdown-toggle sortbutton" type="button" id="Button1" data-toggle="dropdown">
    <img id="sortButton" src="../../images/sortbttnclosed.png" />
</button>

Upvotes: 0

Views: 158

Answers (4)

emerson.marini
emerson.marini

Reputation: 9348

The method .on() should be used instead of .bind() if you're on jQuery > 1.7. The img is wrapped with a button, so the best way is to handle the click event in this element.

You can also dry out a bit your code making it simpler:

$(function () {
    $("#sortButton").closest('button').on('click', function () {
        var img1 = '../../images/sortbttn.png';
        var img2 = '../../images/sortbttnclosed.png';
        var currentImg = $('#sortButton', this).attr('src');

        $('#sortButton', this).attr('src', currentImg === img1 ? img2 : img1);
    });
});

Demo

Upvotes: 1

Eduard
Eduard

Reputation: 3576

Change from #sortButton to #Button1 ! Link to jsFiddle, tested with IE

$(function () {
    var counter = 0;
    $("#Button1").click( function () {
        if (counter == 0) {
            counter = 1;
            $("#sortButton").attr('src', 'http://www.clker.com/cliparts/3/8/b/a/11971212312045077795webmichl_powerbutton_2_states_(_on_off_).svg.med.png');
        } else {
            counter = 0;
            $("#sortButton").attr('src', 'http://www.clker.com/cliparts/S/4/F/9/3/r/round-button-off-md.png');
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default dropdown-toggle sortbutton" type="button" id="Button1" data-toggle="dropdown">
    <img id="sortButton" src="http://www.clker.com/cliparts/S/4/F/9/3/r/round-button-off-md.png" />
</button>

Upvotes: 0

saqibahmad
saqibahmad

Reputation: 962

Instead of binding click of img under button use this 

$("#Button1").bind('click', function(){
  ^ change this

i have tested it working in, every thing else is fine in your code, however you can optimized the code a little bit.

Upvotes: 0

ProblemsOfSumit
ProblemsOfSumit

Reputation: 21375

First of all, use jQuerys on instead of bind.

"As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document." - Source

Second, this might be a caching issue. Try to hide and show the element again:

$(function(){
    var counter = 0;
    $("#sortButton").on('click', function(){
        if (counter == 0) {
            counter = 1;
            $("#sortButton").attr('src', '../../images/sortbttn.png').hide().show();
        }
        else {
            counter = 0;
            $("#sortButton").attr('src', '../../images/sortbttnclosed.png').hide().show();
        }
    });
});

Upvotes: 0

Related Questions