Question

I’ve an img and a button, and I’d like to use jQuery bind to respond to onclick events. Bind works on the input button, but not on img. Here is my JavaScript code:

function drawDetails (event) {
    var id=0;
    if ((typeof $(this).attr('id')) !== 'undefined') {
        id = parseInt($(this).attr('id').replace(/[^0-9]+/g,''));
    } else if((typeof e.id)!=='undefined') {
        id = e.id;
    }
    alert("drawDetails " + id);
}

$("input[id^=camera-]").bind('click', drawDetails);
$("input[id^=details-]").bind('click', drawDetails);

HTML:

<img id="camera-10" src="camera.gif"/>
<input id="details-10" type="button" value="Details 10">

<img id="camera-11" src="camera.gif"/>
<input id="details-11" type="button" value="Details 11">

I’ve prepared a JSFiddle of it. How can I make the event fire also when the image is clicked?

Answer 1

Use img instead of input:

$("img[id^=camera-]").bind('click', drawDetails);

JSFiddle