Question

I have a problem with the following HTML/jQuery script.

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    var count = 1;
    $(function(){
        $('#add').click(function(){
            count++;
            $('#container').append(count + '° posto: '+ '<input type="text" id="item_' + count + '" name="items[]" type="text" /><input type="submit" name="del" id="del" value="Elimina" /><br />');
            return false;
        });
        $('#del').click(function(){
            alert('prova');
            return false;
        });
    });
</script>

<form action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
    <span>1° posto:</span><input type="text" id="item_1" name="items[]" maxlength=<?php echo $psw_length[1]; ?> />
    <input type="submit" name="del" id="del" value="Elimina" /><br />
    <div id="container"></div>
    <input type="submit" name="add" id="add" value="Aggiungi" /><br />

    <input type="submit" name="submit" value="Avanti >" />
</form>

If I click the first “Elimina” button, the alert appears but if I click the second, the third, the fourth, etc. doesn’t happen anything.

Can someone help me, please? Thank you!

Answer 1

Since your elements are dynamically added, you need to use on handler.

Note: You are adding same id of del which is incorrect. An id should be unique for each element.

In order to work around it, you can use a class instead:

class="del"

And then use this code with on handler for dynamic elements:

$('form').on('click', '.del', function(){
      alert('prova');
      return false;
});