CODEWITHSUNDEEP
javascriptjquery
Prabhu
Prabhu

Reputation: 13335

How to perform jquery actions on elements not yet visible

I have a textarea in a div that I need to call a jquery function on to activate my rich textbox. The div is initially hidden and becomes visible through a button click on the server side:

<div id="RichTextDiv" style="display:none">
 <textarea id="RichText" />
</div>

<script type="text/javascript" language="javascript">
  $(document).ready(function () {
    $("#RichText").markItUp(mySettings);
  }
</script>

The above code doesn't work because RichTextDiv is not visible during page load. I need to perform the markItUp() action on RichText as soon as it becomes visible. How can this be achieved in jquery?

Thanks...

Upvotes: 1

Views: 212

Answers (2)

Steve Mallory
Steve Mallory

Reputation: 4283

sjQuery selectors work on hidden divs. They don't work if the element in not in the DOM, but that doesn't seem do be the case here.

Could it be that the div's ID is RichTextDiv and your selector is RichText?

Upvotes: 2

hunter
hunter

Reputation: 63512

You could just leave it visible initially

<div id="RichTextDiv">
    <textarea id="RichText" />
</div>

and MarkItUp and hide on ready

$(document).ready(function () {
    $("#RichText").markItUp(mySettings).hide();
}

or wire it up once your button is clicked:

$("input:button")click(function(){
    $("#RichText").show().markItUp(mySettings);
});

all this said, I don't know why MarkItUp would only work on visible elements, seems odd

Upvotes: 2

Related Questions