Persistent display (hide/show) for dynamically created DOM elements?_问答_开发者

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

开发者 https://www.devze.com 2022-12-09 17:44 出处：网络

I have a set of DOM elements that I want to show only when a controlling checkbox is checked by the user.All of these items have a common class and are initially hidden:

I have a set of DOM elements that I want to show only when a controlling checkbox is checked by the user. All of these items have a common class and are initially hidden:

 .spec { display:none; }

In the click handler of the checkbox, I originally had the following, which worked fine for existing elements. However, the tables are dynamically generated via AJAX, and when new elements are added with the "spec" class, they are not displayed when the checkbox is checked.

// Basic j开发者_运维技巧Query show/hide
if (btn.checked)
    $('.spec').show();
else
    $('.spec').hide();

Since in my case this is in the same JS module, I could always just re-execute this code after adding to the DOM. But in general, that may not be true, so my question is:

What is the normal jQuery way to address this issue?

Since the jQuery show/hide functions alter the element.style and not the style object itself, I ended up writing a jQuery plugin that alters the stylesheet, which works fine, but seems like over kill, hence the question.

var nval = btn.checked ? '' : 'none';
$.styleSheet('.spec', 'display', nval );

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');

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.

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 ;)

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']();
});

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.