CODEWITHSUNDEEP
phpjqueryajax
Zee M
Zee M

Reputation: 83

jquery issue. after reload

<script type="text/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!

Upvotes: 0

Views: 162

Answers (2)

doud
doud

Reputation: 1

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).

Upvotes: 0

Benjamin Wohlwend
Benjamin Wohlwend

Reputation: 31828

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.

Upvotes: 3

Related Questions