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>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Firstly your listbutton id is not unique - you need to fix that - this code is not valid
Secondly - when you load your html dynamically this will wipe out all statically linked events.
In your clickoff function I see what you are trying to do but it is not going to work.
you should rather do this
Give your hearts the clickoff-link class (change to another name if this does not suit you) and use that in the click handler. That way you will have the click dynamically bound to any new content that arrives with a clickoff-link class.
$('.bookmarklist, #listbutton').clickOff(function() {
$('.bookmarklist').css({ 'display': "none" });
});
Secondly - when you load your html dynamically this will wipe out all statically linked events.
In your clickoff function I see what you are trying to do but it is not going to work.
you should rather do this
$('body').on('click','.clickoff-link', function(
Give your hearts the clickoff-link class (change to another name if this does not suit you) and use that in the click handler. That way you will have the click dynamically bound to any new content that arrives with a clickoff-link class.
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());
}
Premium Content
You need an Expert Office subscription to comment.Start Free Trial