Jquery click function with image src

Question

I have an image which is as below

 <img alt="" style="cursor: pointer" src="images/plus.png" width="20" height="20" />

And I'm changing this img src alternatively by using the below code

1. $("[src*=plus]").click( function () {
                    $(this).attr("src", "images/minus.png");
                });
2.  $("[src*=minus]").click(function () {
                $(this).attr("src", "images/plus.png");
            });

The first function is working as expected- when I click on the button for the first time the image is changing to 'minus',but when I click on this changed 'minus' image the function call is going again to the same first function. What am I doing wrong here. Please help.

Referred following link Changing the image source using jQuery

A.D. · Answer 1 · 2017-12-09T11:10:53.440

2

you can try to use on() instead of click() or use another attribute like class for check the current status of the image which is much lighter and easy to execute with a single click event.

$("[src*=plus]").on("click",function () {
                    $(this).attr("src", "images/minus.png");
                });
$("[src*=minus]").on("click",function () {
                    $(this).attr("src", "images/plus.png");
                });

or you can use the following as HTML:

<img alt="" style="cursor: pointer" src="images/plus.png" width="20" height="20" onclick="javascript:return img_click(this);"/>

JavaScript :

function img_click(el)
{
 if($(el).attr("src").toLowerCase().indexOf('plus') != -1)
 {
   $(el).attr("src", "images/plus.png");
 }
 else
 {
   $(el).attr("src", "images/minus.png");
 }

}

edited Dec 09 '17 at 11:10

answered Dec 09 '17 at 10:57

A.D.

2,352
2
15
25

no error it is always going to the first function.Even when I click on the minus button. – Sribin Dec 09 '17 at 11:06
so you can use the added code and function instead of the following code. – A.D. Dec 09 '17 at 11:11
That works fine.Thanks ,but I'm really eager to know what is wrong with the code! – Sribin Dec 09 '17 at 11:18
Some time according to your code the dynamic event not bound to elem due to your code. – A.D. Dec 09 '17 at 11:19
When I added the 'on' also it behaves the same. – Sribin Dec 09 '17 at 11:21
1

@Sribin why you don't try next answer? it solved your problem already. – Pedram Dec 09 '17 at 11:21
It's same as you assign a function to an element at event fired so this behave as same as above. – A.D. Dec 09 '17 at 11:22
@pedram :P what you wanna try to say there is my answer is not relevant or correct to use.Please if you find something wrong than share it there. – A.D. Dec 09 '17 at 11:23
@pedram may be this depends, buddy not to force some to do what you want.that ans is updated when he says that not work with `on` may that's why he does not use your code. – A.D. Dec 09 '17 at 11:25
@Sribin I mentioned to my answer. not this. scroll down to see next answer. it's simple! if you don't want to solve your problem, okay, it's up to you.. – Pedram Dec 09 '17 at 11:28
Happy to help @Sribin, and welcome to vote this one. If this answer or **any other one** solved your issue, please mark it as accepted. – A.D. Dec 09 '17 at 11:32
Thanks both of you for you effort.Both answers works fine. – Sribin Dec 09 '17 at 11:34
then you have to choose one as you answer bro If this solved your issue. – A.D. Dec 09 '17 at 11:35

Pedram · Accepted Answer · 2017-12-09T11:14:54.587

You didn't wrong, just need to use on function, because you changing src after DOM in result it can't find new src, so you need to use live click function:

$(document).on('click','[src*=plus]',function(){
  $(this).attr("src", "images/minus.png");
});
$(document).on('click','[src*=minus]',function(){
  $(this).attr("src", "images/plus.png");
});

$(document).on('click','[src*=plus]',function(){
  $(this).prop("src","images/minus.png");
  console.log('changed to minus');
});

$(document).on('click','[src*=minus]',function(){
  $(this).prop("src","images/plus.png");
  console.log('changed to plus');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img alt="some text" style="cursor: pointer" src="images/plus.png" width="20" height="20" />

score 0 · Answer 3 · answered Dec 09 '17 at 11:34

You need to use

$(document).on('click', '[src*=plus]', function(event) {
    $(event.target).attr("src", "https://png.icons8.com/color/100/minus");
});
$(document).on('click', '[src*=minus]', function() {
    $(event.target).attr("src", "https://png.icons8.com/color/100/plus");
});

The img with src*=minus doesn't exist initially when the event handlers are attached, hence we need to use $(document).on('click', 'selector', handler) thereby attaching handlers on the document.

Working Fiddle: https://jsfiddle.net/wrfscfw1/1/

Jquery click function with image src

3 Answers3