将jQuery与隐藏div中的元素一起使用？

Question

Don't know if this is posible..

I have an ASP.Net page that has a hidden div on it. When the user performs some certain function the div becomes visible ( display='block' ). This is happening in the VB.Net code behind for many reasons.

dvDetail.Style("display") = "block"

I need to have some jQuery assign a plugin to a TextBox that is in the hidden div but I am having a problem doing that - I am a bit new to jQuery. It seems that the TextBox does not exist on the page after it is loaded because of the display='none' of the div at that time and by the time the user performs the action that causes the div to display it is too late for the $(document).ready because it has already run. I have tested the functionality in a non-hidden part of the page and the jQuery works just fine.

To respond to many of your fine answers - the foloowing test code is as close as I got to what I actually need - it actually works but it causes the hidden div to become visable when the page first loads which is not what I need.

$(document).ready(function () {
    $('[id$=dvDetail]').show(function () {
        $('[id$=btnDelete]').click(function () {
            alert('Delete clicked');
        });
    });
});

Answer 1

I don't have experience with asp.net, but if the element (div) is loaded in the DOM, jQuery should be able to find it, wether it's hidden or not. Have you checked if the element does indeed load in the DOM. You could check that (and debug the javascript) with Chrome's developer tools, or FF's firebug.

Answer 2

尝试将您的jquery代码放在$（document）.ready函数之外，但请确保它存在于文本框html之后。

Answer 3

There's a difference between the ASP.NET control property .Visible = False and the CSS attribute display: none - if the control is set to .Visible = False , the control is never rendered on the client side, and as a result any client-side scripts will not be able to find it.

Check as jcane86 said to make sure the control is actually rendered on the client side - it may not be displaying, but it should be in the actual HTML output of the page. If it's there, jQuery should be able to find it (and if you debug Javascript w/ your browser tools of choice, you can test with $("#MyClientSideId").show() in your JavaScript console, as Hunter said).

Answer 4

You can get all the hidden elements like this:

$("div:hidden").each(function(){ alert($(this).attr("id")); });

Hope that helps

Answer 5

Consider the following html:

<div style="" id="hide">
  <textarea ></textarea>
</div>

I'm able to manipulate the hidden textarea with jquery then show it at the end of the chaining.

 $("#hide").children('textarea')
.text('hello there')
.css({width: '300px', height: '300px', padding: '5px', border: '1px solid #ccc'})
.parent().show();

Hope it helps. Cheers

PS: If the element is being loaded at a later time after the document ready has finished for example, you will need to bind an event for the code above to work, using the .bind() method or my favorite .delegate()