Jquery not updating text in elements more than once

Question

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?

Answer 1

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

Answer 2

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/