We help IT Professionals succeed at work.

jquery not working after div reload

Hayat IHYA
Hayat IHYA asked
on
864 Views
1 Endorsement
Last Modified: 2017-04-18
Hi my code was working perfectly suddenly it's stopped working. I have search using ajax, after search "div.results" is reload the Jquery is reloaded too. If I click on the "red heart" div should appear it's working normal but when I search and click, nothing working. http://gbctravel.com/hachem/pub/public/, from "Inspect element" I can see that when I click the div flashes but nothing happen !! any Idea?!!
Ajax :
function getArticless(url){
    var sq = $('#query').val();
    var price = $('#query').val();
        $.ajax({

             url: url + '?query=' + sq,
             type: "get",
            datatype: "html",  
        }).done(function(data){
            console.log(data);
            $('#sort').show();
            $('#sort').html('<h3>Hôtels populaires, priorité : </h3><span class="adress" style="    padding-top: 15px;">Price descending.</span><ul class="top-right-nav"><li><a  style="    padding-top: 15px;" href="/min" id="desc">Trier Par Price uniquement</a></li></ul>');
$(".row.deals.results").empty().hide();
$(".row.deals.results").append(data);
$('.row.deals.results').fadeIn(2000);        
        });
    }

Jquery:

function hidethis(id){
  $('#listdiv_'+id).toggle();
}

html:

<article class="one-third">
   <div id="listbutton" onclick="hidethis(0)" class="bookmark"></div>
   <div id="listdiv_0" style="display:none" class="bookmarklist">
      <div style="padding: 12px 8px;"> <span class="" style="float:left; font-size: 16px;">My hotel Lists</span><span class="cancelbookmark" onclick="hidethis(0)"></span></div>
      <div class="createlist"><a onclick="showthis(0)" class="createlist_0 ">Create new hotel list</a></div>
      <div id="createlistdiv_0" class="createlistdiv" style="display:none;">
         <input type="text" class="inputcreatelist_0" style="width: 60%; float: left; height: 30px;">
            <span class="validaddlist validaddlist_0" onclick="sendthis(&quot;0,15013&quot;)"></span>
            <span class="cancelbookmark morething" onclick="showthis(0)"></span>
</div>
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
When I search for hotel name for example, my Ajax will generate html code like this one
 <article class="one-third">
     <div id="listbutton" onclick="hidethis(ID)" class="bookmark"></div>
     <div id="listdiv_ID" style="display:none" class="bookmarklist">
........
...

Open in new window

Where the ID is variable from 0 to 10 for example !
for each hotel result it's has his own "red heart" & bookmarklist So to make div.bookmarklist appear, it need just click on the heart associate with it, to make hidethis(id) function run.
The example of html that I give at first it was the html code for the first hotel result, where the ID is equal to 0.
The code was working perfectly and suddenly it stops.
I know  that just div is reload after search not entire code, but my jquery code is inside the reloaded div.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Id's must be unique - end of story. If you are building a solution that is based on attaching events to duplicate id's it is not going to work.

You are also statically binding your event handler as describe above - when you are loading your new content those bindings are being wiped out.

Maybe in an earlier version you were returning javascript with your html to re-do the binding and now you are not - I am just calling it as I see it.

Author

Commented:
Each "heart" has unique ID who has unique div.bookmarklist to display, it's not the problem, after some test I found after I do the search div.bookmarklist is listened, simple alert() can confirm. I can executed different code but not ".toggle()"
for example:
function hidethis(id){ 
       alert($('#listdiv_'+id).html());
}

Open in new window

Each "heart" shows in alert the html code of '#listdiv_'+id for calling ID but with .toggle() not working