CODEWITHSUNDEEP
jquery
Floppy88
Floppy88

Reputation: 1051

Click dones't work fine with jQuery

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!

Upvotes: 0

Views: 108

Answers (3)

Sarfraz
Sarfraz

Reputation: 382746

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;
});

Upvotes: 3

gdoron
gdoron

Reputation: 150263

Couple of things:
id must be unique!!!. Change from id selector to name selector

You need to use a delegate event like on or delegate (live is deprecated).

$('#add').click(function(){
            count++;
            $('#container').append(count + '° posto: ' +
               '<input type="text" id="item_' + count + 
               '" name="items[]" type="text" /> ' +
               '<input type="submit" name="del" value="Elimina" /><br />');
               // ===> Not duplicating the del id!!! 
            return false;
        });
$('form').on('click', 'input[name="del"]', function(){ // <== delegate event.
            alert('prova');
            return false;
        });

Upvotes: 1

elrado
elrado

Reputation: 5272

Use jquery on event for dynamicly created controls. Do not use live it is obsolete!

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    var count = 1;
    $(function(){
        $('#add').on('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').on('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>**strong text**

Upvotes: -1

Related Questions