jquery not working after div reload
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ôtel
$(".row.deals.results").em
$(".row.deals.results").ap
$('.row.deals.results').fa
});
}
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)"></sp
<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("0,
<span class="cancelbookmark morething" onclick="showthis(0)"></sp
</div>
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ôtel
$(".row.deals.results").em
$(".row.deals.results").ap
$('.row.deals.results').fa
});
}
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)"></sp
<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("0,
<span class="cancelbookmark morething" onclick="showthis(0)"></sp
</div>
When I search for hotel name for example, my Ajax will generate html code like this one
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.
<article class="one-third">
<div id="listbutton" onclick="hidethis(ID)" class="bookmark"></div>
<div id="listdiv_ID" style="display:none" class="bookmarklist">
........
...
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.
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.
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.
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:
for example:
function hidethis(id){
alert($('#listdiv_'+id).html());
}