0

On submit of search, message with cancel button will display then via ajax data table will display. On click of cancel button loaded ajax result should get clear. But it is not getting cleared.

Kindly find my code

html file

      <div class="report_result" >
         <p class="report_loader" >Loading please wait...
         <button type="button" aria-label="Close">
             <span class="stop_load" aria-hidden="true"><u>Cancel</u></span>
         </button>
         </p>
     </div>

js file

//wiring up future elements
  $(document).on('click', '.report_result > .stop_load', function() {        
        $('#result').hide();
  });

//using click function
$(".stop_load").click(function(){
  $('#result').hide();
});


ajax call
 ajaxStop: function() {              
        $(".report_result").hide(); 
    }
.......
beforeSend:function() {

                $('report_result').show();
            },
.......

But it's not working after loading ajax . If I call before ajax call both the code works. Kindly help..

Roshni hegde
  • 423
  • 3
  • 14
  • 2
    ```('#result').hide();``` --> ```$('#result').hide();```. – prettyInPink May 15 '21 at 10:38
  • 1
    "wiring up future elements" = "delegated event binding" (see more [here](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements)) – freedomn-m May 15 '21 at 10:39
  • 1
    Is there definitely only a single `id=result` element? As we can't guess what your ajax call does, if it's not removing the first id=result then there will be two but only the first will be hidden - could you give the id=result element a class instead and use that? – freedomn-m May 15 '21 at 10:43
  • Hi , I have updated the code. – Roshni hegde May 15 '21 at 10:59
  • @freedomn-m tried with adding id not working – Roshni hegde May 15 '21 at 11:17
  • You mean giving it a class and changing the selector? Sounds like your ajax call isn't doing what you expect (no id=result / class=result in the output) – freedomn-m May 15 '21 at 11:20
  • @freedomn-m If i load this query before ajax call then it works but if use this snippet after calling ajax then it doesn't work. I have read click function doesn't work after ajax class for that we have to use delegates. That also i have done but no luck – Roshni hegde May 15 '21 at 11:31
  • Show more codes . Also , remove `>` from your selector . – Swati May 15 '21 at 12:21

1 Answers1

0

Did you try it with the body tag (or just a higher existing parent element) in the selector as well? Like:

$('body').on('click','.report_result > .stop_load',function(){
  $('body #result').hide();
});

$('body').on('click','.stop_load',function(){
  $('body #result').hide();
});
arvie
  • 722
  • 1
  • 5
  • 9