0

Problem: Applying $(".price").hide(); works to elements already rendered, however, when I load a new template via javascript, the price class will be visible.

Question: Is there a way to apply a style to all future instances of a class upon insertion into the DOM.

Example:

$(".price").hide();
$('body').append('<div class="price">19.00</div>'); // this should be hidden.
Vivin Paliath
  • 94,126
  • 40
  • 223
  • 295
Fostah
  • 2,947
  • 4
  • 56
  • 78
  • Do you mean *regardless* if the element has been added with jquery, or *if and only if* the element has been added with jquery. If the answer is regardless, why don't you just make the price class have display:none? – aquinas Jul 02 '12 at 18:33
  • I have a price visibility toggle switch, and when this app is using jQuery.tmpl() to load new templates unfortunately. So depending on the switch, I set visibility for all future classes added to the DOM. – Fostah Jul 02 '12 at 18:49
  • Then I submit that you're doing it the hard way. Seem my answer below. – aquinas Jul 02 '12 at 19:15

5 Answers5

3

You should be able to do this with livequery.

$('.price').livequery(function() {
    $(this).hide();
});

The advantage is that this will cover existing, as well as any new elements you add to the DOM.

EDIT: As others have pointed out livequery was written for jQuery 1.3-1.4. So I'm not sure how applicable it would be to your case. Let me see if there is anything equivalent for 1.7.2. Take a look at this answer for more information about mimicking livequery's functionality in jQuery 1.7+.

Community
  • 1
  • 1
Vivin Paliath
  • 94,126
  • 40
  • 223
  • 295
  • Are you sure that this will work with jQuery 1.7.2? It was written for 1.3 - 1.4. – Blender Jul 02 '12 at 18:30
  • @Blender Well, crap. I've used this before, but I didn't take care to note what version of jQuery I was using. Let me check if it works in 1.7.2 – Vivin Paliath Jul 02 '12 at 18:31
  • @VivinPaliath: was gonna down-vote this. last update 2 years back. see the git. no offense. :) – naveen Jul 02 '12 at 18:34
  • @naveen None taken, naveen :). My mistake for not checking the version. Seems odd that such a functionality wouldn't exist in 1.7.2. – Vivin Paliath Jul 02 '12 at 18:35
  • I am currently using 1.6.2 on this project. I will see if its compatible. Thanks! – Fostah Jul 02 '12 at 18:41
1

I think the best solution is to use a helper class:

CSS

.helper{
    display: none;
}

jQuery

$(".price").addClass('helper'); //for dyanmic addition to certain classes
$('body').append('<div class="price helper">19.00</div>');  //for adding afterward
ramblinjan
  • 6,578
  • 3
  • 30
  • 38
  • The only problem is that the templates are already defined and it would require more work to apply this class after render. But cool idea. – Fostah Jul 02 '12 at 18:42
1

Instead of doing it this way, make your toggle switch modify a container element to add or remove a class.

Then, have a CSS rule that looks like this:

.hidePrice .price{
    display:none;
}​

When you toggle your button, just toggle the hidePrice class on your container element.

See: http://jsfiddle.net/bXChZ/

aquinas
  • 23,318
  • 5
  • 58
  • 81
0

This worked for me:

With jQuery:

$('<style id="priceVisibility">div.results .price {display: none; }</style>').appendTo('head');

Without jQuery:

// Appending style element to the head with a overriding style.
var style = document.createElement('style');
style.type = 'text/css';
style.id = 'priceVisibility';
style.innerHTML = 'div.results .price {display: none; }';
document.getElementsByTagName('head')[0].appendChild(style);
Fostah
  • 2,947
  • 4
  • 56
  • 78
0

You could just add a class to the <body> tag, and then hide the .price elements with CSS. E.g.

jQuery:

$('body').addClass('hide-price');

CSS:

.price {display: block}
.hide-price .price {display: none}
Danny Connell
  • 782
  • 1
  • 8
  • 18