使用jquery调整动态生成id的html对象

Question

There are many images in the page and I have the following php code in which the id of the images are generated dynamically

echo '<input type="hidden" value='.$count.'';
    for($i = 1; $i <= $count; $i++) {
        echo '<input type="image" src= "image.png" id=img'.($i).'';
    }

Now, I have to resize these images one by one when they are double clicked. The code for that is as below

$function(){
    var c= document.getElementById('count').value;
    for(i = 1; i <= c; i++) {
        $('#V' + i).dblclick( function() {
            alert("Proceed with resizing");
            $('#V' + i).resizable();
        }
    });

With the above code,if the count is say 2 then it is showing alert twice but resizing one i.e the first one and the other one is not getting resized.

Answer 1

You can try something like this (you need jQuery for it)

$( 'input[type=image]' ).dblclick(function() {
    alert("Proceed with resizing");
    $(this).resizable();
});

This will target only element you are clicking on. You don't need to loop over all elements, the dblclick is an event, that is handled only when you are using it