After ajax load, bind click proxy doesn't work anymore

Question

I am creating a page that has a few clickable divs. When clicked, text about the specific div is shown somewhere on the page. That works.

Now I added an ajax call to reload the page with a different set of divs with the same class that should trigger the text-showing function when clicked. The new divs are loaded but when clicked, do not load text anywhere.

Events that start with $(".toggle1").click(function () work, but not $(".block").bind('click', $.proxy(function(event). What is the issue?

<script type="text/javascript">
$(function() {  
      // CALL TO ADD MORE DIVS
    $("#trace").bind('click', $.proxy(function(event) {
        var button2 = $('#combo').val();
        if(button2 == 'abc') {
            var trans = 'abc';
        }
        $.ajax({ // ajax call starts
            url: 'transactions.php', // JQuery loads transactions.php
            data: 'button2=' + $('#combo').val(), // Send value of the clicked button
            dataType: 'json', // Choosing a JSON datatype
            success: function(data) // Variable data constains the data we get from serverside
            {
                JSGraphIt.delCanvas('mainCanvas');
                $('.test').html('<h1>' + trans + '</h1>'); // Clear #content div
                $('#mainCanvas').html(''); // Clear #content div
                $('#mainCanvas').append(data);
                JSGraphIt.initPageObjects();
            }
        });
        return false; // keeps the page from not refreshing 

    }, this));
    
    // THIS CALL WORKS
    $(".toggle1").click(function () {
        $("#content").slideToggle("fast");

        var up = $("#image1").attr('src') == "img/arrow_up.png"

        $("#image1").attr(
            'src', 
            $("#image1").attr('src').replace(up ? '_up' : '_down', up ? '_down' : '_up')
        );
    }); // End Application Details Toggle
    
    // THIS CALL DOES NOT WORK
    $(".block").bind('click', $.proxy(function(event) {
        var input = $(event.target).attr('id');
        var lines = input.split('_');
        var button = lines[0];
        $.ajax({ 
            url: 'serverside.php', 
            data: 'button=' + button,
            dataType: 'json', 
            success: function(data)
            {
                $('#content').html('');
                $('#content').append(data);
            }
        });
        return false;
    }, this)); 
});
</script>

Answer 1

As your document is getting modified by Ajax, so you need to change your above click function with this:

$(document).on('click', '#trace', $.proxy(function(event) {
/****Your Code ***/
});

OR

$('#trace').live('click', $.proxy(function(event) {
/****Your Code ***/
});

Answer 2

as the dom is manipulated bla bla

delegate the click on sth thats always there, eg. the document object

$(document).on('click', ".block", function(){ $.proxy(function(event) { ...