Buttons received from Ajax are not clickable-CodePudding

I'm using the following code to receive some content from a page called filter.PHP. But the issue is the buttons become not clickable once fetched.

<script type="text/javascript">
  $(document).ready(function() {

    $("#display").click(function() {

      $.ajax({
        type: "POST",
        url: "filter.php",
        dataType: "html",
        success: function(response) {
          $("#responsecontainer").html(response);

        }

      });
    });
  });
</script>

I have buttons like these on the filter.php file.

<button onclick="location.href='details.php?id=<?php echo htmlspecialchars($result->nid); ?>'" >Details </button>

Any help would be much appreciated.

CodePudding user response：

You have to add the event listener from JavaScript, when you fetch the html from an ajax response.

document.querySelector('.buttonnew').addEventListener('click', () => { location.href=''});

    document.querySelectorAll('.buttonnew').forEach(btn => { btn.addEventListener('click', () => { location.href='';})});