Question

I have a jquery function whichh looks like this:

<script type="text/javascript">
$(document).ready(function() {
    $('a#id').click(function(e){
        e.preventDefault();
        var id = $(this).attr('pid');
        var title = $(this).attr('ptitle');
    $('#product_list').prepend('<input type="hidden" value="'+ id +'"/><div>'+ title +'</div>')
    });
});
</script>

I have a javascript file which has this code here:

> http.open('get', 'livesearch.php?name='+searchq+'&nocache =
> '+nocache+'&type=bookings/products');

The livesearch.php file has the a element (which the jQuery is requesting) like this:

<a href="#" id="id" ptitle="<?php echo $product['title']; ?>" pid="<?php echo $product['product_id']; ?>">Add</a>

However when I click on the a element the jQuery doesn’t respond. Could any please help?

Thanks
Peter

Answer 1

Use either live or delegate to add the click event because the element is not present in the DOM at the time the event is bound.

$('#id').live('click', function(e){
        alert('you clicked the id element' ); 
});