javascript - Multiple image clicks JQuery -

javascript - Multiple image clicks JQuery -

i having problem trying phone call jquery function multiple images on page. if help me out great.

this code:

html

<input type="image" name="ratebutton[1]" src="img/rate1.png" height="40" width="40" value="1" onclick="ratebox(1)"/> <input type="image" name="ratebutton[2]" src="img/rate2.png" height="40" width="40" value="1" onclick="ratebox(2)"/> <input type="image" name="ratebutton[3]" src="img/rate3.png" height="40" width="40" value="1" onclick="ratebox(3)"/> <input type="image" name="ratebutton[4]" src="img/rate4.png" height="40" width="40" value="1" onclick="ratebox(4)"/> <input type="image" name="ratebutton[5]" src="img/rate5.png" height="40" width="40" value="1" onclick="ratebox(5)"/> <input type="image" name="ratebutton[6]" src="img/rate6.png" height="40" width="40" value="1" onclick="ratebox(6)"/> <input type="image" name="ratebutton[7]" src="img/rate7.png" height="40" width="40" value="1" onclick="ratebox(7)"/> <input type="image" name="ratebutton[8]" src="img/rate8.png" height="40" width="40" value="1" onclick="ratebox(8)"/> <input type="image" name="ratebutton[9]" src="img/rate9.png" height="40" width="40" value="1" onclick="ratebox(9)"/> <input type="image" name="ratebutton[10]" src="img/rate10.png" height="40" width="40" value="1" onclick="ratebox(10)"/><br>

jquery

$(document).ready(function(){ function ratebox(rating){ // ajax phone call here... } });

you should move function outside .ready() function others have suggested.

also best practice attaching events multiple elements delegate event parent element. attach 1 event , hear events bubble-up selector used. ex. using jquery...

$(parent-container).on('click', element-selector, function(e){ // ajax phone call here. });

in situation can add together parent wrapper (with id = "ratings") , add together class ratebuttons (class = "ratebutton")

reduced dom sake of clarity.

<div id="ratings"> <input type="image" class="ratebutton" name="ratebutton[1]" src="img/rate1.png" height="40" width="40" value="1"/> <input type="image" class="ratebutton" name="ratebutton[2]" src="img/rate2.png" height="40" width="40" value="1"/> <input type="image" class="ratebutton" name="ratebutton[3]" src="img/rate3.png" height="40" width="40" value="1"/> <input type="image" class="ratebutton" name="ratebutton[4]" src="img/rate4.png" height="40" width="40" value="1"/> <input type="image" class="ratebutton" name="ratebutton[5]" src="img/rate5.png" height="40" width="40" value="1"/> </div> <br>

and bind event on parent (outside ready function of-course)

$('#ratings').on('click', '.ratebutton', function(e){ /* alternatively if additional parent element not desired event can delegated document */ var elem = this; // refer clicked object var index = $(this).index(); // index, index 0 based alert('clicked element index: '+index); // ajax phone call here. });

example

jquery .on() documentaion

javascript jquery html onclick