Question

How can I prevent default event action on html elements loaded after dom has been created.
I have page which includes another page via jquery .load method as you can see in first line of code.

Code starting from third line does not seem to work.When I click the link with a.clearCart the browser just loads the page instead of requesting page in background.
The link with class clearCart is located in separate file called ‘Cart.php’ which is loaded when page is ready.

Page below is :index.php

$(document).ready(function(e) {
    $('#cart').load('./ajax/Cart.php');//a.clearCart is located in this file    



    $("a.clearCart").click(function(e)
    {
        e.preventDefault();
        return false;
        $.getJSON('./ajax/clearCart.php?','id=12',check);
        function check(data)
        {
            if(data.Status == "Success")
            {
                alert("Update Cart");//For Debugging Only,should call UpdateCart()
            }
            else if(data.Status == "Failed")
            {
                alert("WTF");//Welcome to Finland
            }
        }
    });





    function UpdateCart()
    {
        $('#cart').load('./ajax/Cart.php');
    }
    $('.formInfo form').submit(function(e) {

        var id = this.prodId.value;
        var qta = this.qty.value;
        var data = {prodId:id,qty:qta};
        $.getJSON('./ajax/addcart.php',data,processData);

        function processData(data)
        {
            if($('p.message').text().length > 5)
            {
                $('p.message').empty().removeClass('.success').removeClass('failure');

            }
            if(data.Status == "Failed")
            {
                $('p.message').append(data.Reason).addClass('failure');
            }
            else if(data.Status == "Success")
            {
                $('p.message').append(data.Reason).addClass('success');
                UpdateCart();
            }
        }

        return false;
    });


});

Answer 1

You can use live() or on() function. I will show with on() because live() is deprecated as of jQuery 1.7:

Change

$("a.clearCart").click(function(e)

To

$(document).on('click', 'a.clearCart', function(e) {
    // Code goes here
}).

See

• http://api.jquery.com/live/ – Deprecated as of jQuery 1.7
• http://api.jquery.com/on/