2012/05/10

jQuery delegate

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        // add row button
        $('.append_button').click(function(){
            var row = $('<div class="lister">'+new Date()+'&nbsp;&nbsp;&nbsp;<input type="button" class="row_button" value="click me!" /></div>');
            row.appendTo('.container');
        });
        
        // delegate for append button
        $('.container').delegate('.lister input:button', 'click', function(){
            alert('delegate ok!');
        });
        // delegate for append button (falied, because .lister was not found on delegate action)
        $('.container .lister').delegate('input:button', 'click', function(){
            alert('delegate, again!');
        });
    });
</script>
</head>
<body>
<div class="container">
    <input type="button" class="append_button" value="Add" />
</div>
</body>
</html>