.click() doesn't work a second time

Question

As a beginner in jQuery I'm trying to understand how to handle .click().

My event click function :

<script language="javascript" type="text/javascript">
    $(document).ready(function() {

$('.del').click(function() {

        var lien = $(this).attr("title");

        $.post(lien, function(data) {

        $('#result').empty();
        $('#result').append(data);

        })
        });
</script>

The span :

<span title="<?php echo base_url().'del/cat/'.$cat->idcategories ?>"class="del alignright">supprimer</span>

This works the first time but not after that. Is this happening because I'm using attr()?

Any explanation of the expected behavior would be very much appreciated.

Answer 1

First of all, it looks like you're missing the last bracket-parens, to close document.ready. This could (should) be causing an error. Your code should be like this:

$(document).ready(function() {    
  $('.del').click(function() {
    var lien = $(this).attr("title");
    $.post(lien, function(data) {
        $('#result').empty();
        $('#result').append(data);
    });
  });
});

For good measure, also add a space before class in your span:

<span title="<?php echo base_url().'del/cat/'.$cat->idcategories ?>" class="del alignright">supprimer</span>

Then consider the other answers of changing click to live in the event that you're somehow replacing or unbinding .del elsewhere.