ansaurus

Question

Persistent display (hide/show) for dynamically created DOM elements?

Answer 1

A:

Perhaps altering the class of the elements would be better. Then when you add elements in the DOM, you can assign them the proper class for the state the page is in.

Ned Batchelder 2009-10-26 21:50:58

That occurred to me, but currently details of the template (from which the elements are created) aren't known by the JS code.

NVRAM 2009-10-26 22:08:34

Answer 2

A:

I know 2 solutions: 1) Use live for element which doesn't exist yet for example: `$('a .special').live("click", function(){...});

2) Use callback function of load. For example: $('p .special').load('x.html', {}, function(){ //search for new element and bind them new function. ...

IMHO second is better ;)

Rin 2009-10-26 21:58:10

The elements themselves don't have event handlers, so I don't think **$.live()** works, does it? I'll look into .load() I didn't think it applied.

NVRAM 2009-10-26 22:23:24

The *$.load()* function doesn't help since: (1) I'm creating HTML from XML returned by the server, and (2) it's not event handling, but visibility I'm wanting to change. See my post starting at "I could always just...".

NVRAM 2009-10-26 22:54:42

Answer 3

A:

It looks like you are testing if the btn is checked or unchecked when the doc loads. Instead of (or in addition to) this, add an event handler that fires whenever the checkbox is interacted with by the user. The change handler is the one you want. This will always use the current state of the DOM, and so it will include any newly added elements:

$(btn).change(function(){
  $('.spec').toggle();
});

For simplicity, I've used the toggle handler to change display:hidden to display:block/inline or vice versa. If you want to be explicit, you could do this:

$(btn).change(function(){
  $('.spec')[$(this).val() ? 'show' : 'hide']();
});

Premasagar 2009-10-26 22:08:42

No, as I said, I do this "*In the click handler of the checkbox...*". And that wasn't the question, it's dynamic DOM elements.

NVRAM 2009-10-26 22:42:43

Ah, indeed you did. Sorry I missed that.

Premasagar 2009-10-27 11:55:45

Answer 4

A:

You came up with two good solutions and shot them both down :)

If you're looking for a simple solution, re-running $(".spec").show() seems the best.

Otherwise, I don't see why is tweaking the stylesheet an overkill? It's exactly what should be done -- you want to control the presentation of all the elements with the given class, both existing and added dynamically. It's exactly what CSS is for.

Nickolay 2009-10-27 08:19:28

Valid point -- but the "overkill" was writing a jQuery plugin when, so far, I've only needed this in one place, and as you point out I *could* add the show/hide call to the creation phase. But, since I wanted to keep the data-processing and UI separated and jQuery doesn't support SS modification, I asked: "What is the *normal* jQuery way to address this issue?"

NVRAM 2009-10-28 15:48:02

Answer 5

+2 A:

You should add a class to the <body> (or to some other parent element) for this purpose, and then toggle that class via jQuery.

CSS:

body.spec_is_hidden .spec {
  display: none;
}

JS:

if (btn.checked)
    $('body').addClass('spec_is_hidden');
else
    $('body').removeClass('spec_is_hidden');

Joel L 2009-10-27 08:32:16

This works brilliantly, thanks. Seems obvious, but only in retrospect.

NVRAM 2009-10-27 16:59:30

Since I want to hide them initially, and the body is defined externally so I used a DOM element to wrap the 'spec' elements with *hideStuff* that's defined: ` #wrapper.hideStuff .spec { display: none; }`

NVRAM 2009-10-27 19:31:45

Rats, I spoke too soon. It *does not* work when the elements appear within a table in IE, since it's CSS inheritance is broken for tables. I guess I'm stuck with my `$styleSheet()` method.

NVRAM 2009-10-28 02:15:34

Perhaps adding an extra CSS selector for IE would also help? (#wrapper.hideStuff table tr.spec {}, for example)

Joel L 2009-10-28 08:24:57

ansaurus

tags:

views:

answers:

Persistent display (hide/show) for dynamically created DOM elements?

related questions