HTML <img> onclick function to jquery

Question

I have a a grid of images which has it's HTML generated with PHP. Each image has an onclick() function, which has a PHP variable in the arguments. On the page that the HTML is on, I have a Javascript function which uses the arguments in the onclick(arg) function.

I've started to use jquery and I want to be able change this onclick() function into my jquery functions, while using the PHP arguments from the PHP page.

This is the code from the PHP file that generates the HTML, as you can see, there is an onclick function, which would have an argument that is a number:

Echo "<img src= '$link[Image_Link] . /133x100' id='$row[Item_Name]' title='$row[Item_Name]' class='clickableImage' alt='$just_name' onClick='addValue(". $credit_value .")' border=0 style='position: relative; top: 0; left: 0;'/>";

This is my Javascript function on the HTML page, it just changes some text on the page:

function addValue(credits){
    var value = document.getElementById("value").innerHTML;
    value = parseInt(value, 10);
    var totalValue = value+credits;
    document.getElementById("value").innerHTML = totalValue;
}

I already have a jquery function set up for when these images are clicked, but I want to be able to use the $credit_value variable from the PHP file. This is the start of my jquery function:

$().ready(function () {
    $('img.clickableImage').click(function () {
        if ($(this).data('selected')) { ......

AmmarCSE · Accepted Answer · 2015-06-01 11:10:05Z

1

In your echo statement, put a custom data-* attribute like

echo "<img data-credit='". $credit_value ."' src= '$link[Image_Link] . /133x100' id='$row[Item_Name]' title='$row[Item_Name]' class='clickableImage' alt='$just_name' border=0 style='position: relative; top: 0; left: 0;'/>";

and then in your click handler access it like

$('img.clickableImage').click(function () {
        var credit = $(this).attr('data-credit');
});

answered Jun 1, 2015 at 11:10

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2015-06-01 11:11:22Z

1

You can use data-*prefixed custom attribute, Set the value

echo "<img  data-creditvalue='. $credit_value .' ......../>";

Script, to fetch use $.fn.data() as you are already using $(this).data('selected')

var creditvalue = $(this).data("creditvalue")

edited Jun 1, 2015 at 11:11

answered Jun 1, 2015 at 11:10

Satpal

134k13 gold badges168 silver badges171 bronze badges

2 Comments

AmmarCSE Over a year ago

are you my evil twin :) ?

Satpal Over a year ago

@AmmarCSE, You can call be twin but not evil :) Our though process is quite same

Sudharsan S · Accepted Answer · 2015-06-01 11:10:10Z

0

Use Event delegation

 $(document).ready(function () {
    $(document).on('click', 'img.clickableImage', function () {
            if ($(this).data('selected')) {
               // here your code
            }
    });
 });

answered Jun 1, 2015 at 11:10

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Collectives™ on Stack Overflow

HTML <img> onclick function to jquery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related