0

I would like to ask a slightly abstract question. Maybe there is someone who can help me. I want to update a section of the html page with Ajax after clicking on the div with class update or delete.

$('.update').on('click',function(){
        $.post(ajaxurl, content, function(data){
            $('.data-section').html(data);
        });
    });

data contain multiple blocks of menu, hence many clickable div Update and Delete.

<div class="data-section">
<div class="menu">
    <div class="Update">
        Update
    </div>
    <div class="Delete">
        Delete
     </div>
 </div>
</div>

When I refresh that section with ajax, no div of that section work afterwards. I have to refresh the page for the div to work again. Is this a usual behaviour? How can I manage this problem?

Kyv
  • 615
  • 6
  • 26
  • Where are the buttons in your html? I see no .btn-event DOM object @Kyv – Junior Dec 21 '21 at 01:47
  • I have updated the question @DankyiAnnoKwaku. Thank you for pointing that out. Indeed, they are buttons as well, but I did not include them. They have the same behavior as the clickable div. – Kyv Dec 21 '21 at 01:57
  • It sounds like the linked duplicate describes the problem, right? You replace the content of the `div`, so any event handlers you had for elements in that div will no longer work - those elements are gone. See the answers in the dup - eg `$('.data-section').on('click', '.update', function() { ...`. – Don't Panic Dec 21 '21 at 04:24
  • That was helpful, thank you. – Kyv Dec 21 '21 at 17:16

0 Answers0