javascript function stops working after div refresh

Question

$(function() {
  $(".reqdeb").click(function() {
    console.log("Working");
    var req_id = $(this).attr("id");
    var info = 'id=' + req_id;
    if (confirm("Are you sure you want to delete this request?")) {
      $.ajax({
        cache : false,
        type : "POST",
        url : "del_req.php",
        data : info,
        success : function() {
        }
      });
      $(this).parents("tr").animate("fast").animate({
        opacity : "hide"
      }, "slow");
    }
    return false;
  });
});

This is the code that stops working after a few tries of pressing the button and the code that causes it to stop working is this:

function autoRefresh_div(){
    $("#refresh").load("reqs.php");
    $("#nrref").load("numreq.php")
}
setInterval('autoRefresh_div()', 5000);

if the `.reqdeb` element is added throught the `load` function, it's normal. You have to bind the click function at every reload — 3Dos, Oct 31 '17 at 13:22
Not to sure what you mean @moffeltje I'm kinda new to using this site — Toxic, Oct 31 '17 at 13:26

score 2 · Accepted Answer · answered Oct 31 '17 at 13:22

Seems you are replacing the existing elements thus event handlers are also removed. You can use .on() method with Event Delegation approach.

General Syntax

$(document).on('event','selector',callback_function)

Example

$(document).on('click', ".reqdeb", function(){
    //Rest of your code
});

In place of document you should use closest static container for better performance.

javascript function stops working after div refresh

1 Answers1