So I have a textfield that has onblur/onkeyup/onclick triggers. This works fine.
It takes the value and adds it in a <b id="search_term"></b>
. This works, but only the first time visually. However, inspector shows it's being updated every time.
The element being updated is in a fixed position and I use the JQuery $( "#search_results" ).slideDown( "slow", function() {});
to show the container element if the search input is not empty.
If I click the close button to trigger the slideUp()
function, for a split second you can see the updated text in the element before the element disappears.
Has anyone come across this phenomenon? Searching has yielded nothing similar.
I've tried
$("#search_term").text(string);
$("#search_term").html(string);
document.getElementById("search_term").innerHTML=string;
None of them update with the actual variable.
I've also tested using JQuery to retrieve a value out of a textbox. If you change the value of the textbox after you've run the function once, the only possible way to get the updated value is via $('#test_box').attr("value");
.text()
and .html()
still show the very first value.
Is this a bug in JQuery or am I doing something wrong?
Been trying to solve for hours. Thanks for any advice.
Edit: Narrowed it down to being an issue with slideDown()
and slideUp()
. If I remove them and only use .show()
, the element updates normally. Is there a way to force the element to re-render? Or should I find a replacement for slideDown/Up?
The usual reason for this is that you have bound an event to an element that has been removed / re-added and so the event is gone.
Changing the text
in itself should be able to go on indefinitely, as per this example:
<div id="example"></div>
<div id="test">Go</div>
JS:
$('#test').click(function() {
$('#example').text(Date.now);
});
See it running by clicking the GO text as much as you like here: http://jsfiddle.net/5BXqg/
The answer ended up being what I was doing inside of slideDown()
.
I was doing:
$("#seach_container").slideDown("slow", function() {
document.getElementById("body").style.position="fixed"; // to prevent bg scrolling
document.getElementById("body").style.overflowY="scroll"; // to prevent doc jumping
// Applying these two lines multiple times was giving me the issue of text not updating.
});
I ended up setting a boolean to make sure I only changed the position to fixed once. Fixed it right away.
So very specific situation, but maybe this solution will save someone else the 6 hours it cost me. hah
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.