jquery issue. after reload

<script type="t开发者_如何学JAVAext/javascript">
var auto_refresh = setInterval(
function()
{
$('#data').load('data.php');
}, 10000);

$(".banit").click(function() {
var namer= $(this).val();
alert(namer);

});

</script>

Data from data.php is loaded into div with id data every 10 sec this data has a buttons (looped and echoed in php) with class banit. and button banit has value something.. this value something has to be alerted.

now once the page is opened this button works and alerts fine! but once the data is reloaded it stops working! please help!

When you call $('#data').load('data.php');, you destroy all child elements of #data, including the button and its click handler.

You have to either rebind the click event after loading the new content or use live:

$(".banit").live('click', function() {
    var namer= $(this).val();
    alert(namer);
});

Event handlers bound with live will work for all current and future DOM elements.

Like piquadrat says, you have to rebind the handler each time, but I'd rather use the "delegate" method like paul irish says here : http://www.slideshare.net/paul.irish/perfcompression (slide 34 to 38).