jquery not reacting to class changes? - javascript

So I've got this assignment I've got to do, it has to do with a christmas tree where you can click the branches and turn them into ornaments and whatnot.
When the tree is on, you should not be able to change the ornaments.
So far i've got this jquery:
$('.branch1, .ornament1, .light1').click(function()
{
alert("WARNING - Power off the tree first!");
die();
});
$('.branch, .ornament, .light').click(function()
{
this.className =
{
light : 'branch', branch: 'ornament', ornament: 'light'
}[this.className];
});
$('#treePowerButton').click(function()
{
$(".branch, .branch1").toggleClass("branch branch1");
$(".ornament, .ornament1").toggleClass("ornament ornament1");
$(".light, .light1").toggleClass("light light1");
$(".powerStatus, .powerStatus1").toggleClass("powerStatus powerStatus1");
});
$('#treeClearButton').click(function()
{
$(".ornament").toggleClass("ornament branch");
$(".light").toggleClass("light branch");
});
But when I turn the tree on and click a branch or ornament it doesn't throw the alert, it just makes the clicked item completely disappear. What am I doing wrong?
here's a jsfiddle: http://jsfiddle.net/a1smjgrv/

Refined Answer:
Try this jsfiddle: http://jsfiddle.net/a1smjgrv/5/. It will accomplish what you're looking for and is much simpler than trying to bind multiple click events on the same element.
Original Answer:
The problem is that when the page is loaded, there are not any 'branch1', 'ornament1', or 'light1' elements on the page, so the click event containing the alert() is not being bound to anything. There are only 'branch' elements on the page, so the click events for the branches are all that's bound.
When the tree is powered ON and the 'branch' elements are changed to be a 'branch1' class, the click event containing the className update are still attached to that element. So, when it tries to update the class name based on your object literal ({light: 'branch', branch: 'ornament', etc...}), it can't find a match for any of those because the class name of the given element is now 'branch1' instead of 'branch', so it's setting the class name on the element to 'undefined' (hence, the disappearance).
If you want a function to be bound to an element at any point in time that the element is rendered to the page, you'll need to bind it at the document level instead. Something like the following:
$(document).on('click', 'branch1', function() {
alert('SHAZAM!');
});

Related

jQuery selector precedence when using pattern matching

I am creating a form that implements a bunch of similar elements. They are custom select boxes, created out of <ul>s.
Some of these elements are slightly different in the way I want the mousedown event to be handled though.
The way I have it set up currently is that, by appending _custom_select to the end of an elements class name, it will be treated as one of these special elements as far as CSS is concerned.
However, when the string selections is found inside a class name (that will coincidentally also end with _custom_select in order to apply the proper styling) I want to use a different mousedown event handler.
This is the relevant section of my event listener set up:
$('[class$="_custom_select"] li').mousedown(function(event){
var opt= event.target;
if(opt.className!='li_disabled' && event.which==1)
{
if(opt.className=='li_unselected'){
opt.className= 'li_selected';
}
else{
opt.className= 'li_unselected';
}
update_selections(opt.parentElement);
}
});
$('[class*="selections"]').mousedown(function(event){
var opt=event.target;
if(event.which==1){
if(opt.className=='li_unselected'){
opt.className= 'li_selected_2';
}
else{
opt.className= 'li_unselected';
}
}
});
This code works, but notice how, in the second binding, I had to bind the event listener to the ul that holds the li that is actually being clicked.(The ul is the element whose class name matches the pattern) In the first one however, I can bind the event listener directly to the li elements contained within the ul.
If I change the second jQuery selector to $('[class*="selections"] li') the event listener is never bound to the corresponding lis.
What is causing this behavior?
I am aware that I can just check event.target.tagName to ensure the event is bubbling up from an <li>, but that is not what the question is about.
I originally thought it had something to do with precedence and that the listeners weren't being bound because the lis that would have matched the second selector already matched against the first selector.
However, after implementing logging and looking at the DOM I have determined that when I change the second selector to: $('[class*="selections"] li') neither event listener is bound to the lis that match the second selector.
Here is a link to a JS fiddle of the 'working version'. If you add ' li' to the second selector and then try to click the <li>s in the box to the right, you will see that they no longer become green.
jsFiddle
https://jsfiddle.net/6sg6z33u/4/
Okay, thanks for posting the jsFiddle. This is an easy fix!
The elements in your second li are being added dynamically. When you bind to elements using the shortcut methods like .click() it only binds to the elements on the page when it initially bound
The fix: use the .on() method, which is the preferred method per jQuery foundation. This method allows for live binding meaning it will pick up on dynamic elements.
$('[class*="selections"]').on( 'mousedown', 'li', function(event) {
var opt = event.target;
if (event.which == 1) {
if (opt.className == 'li_unselected') {
opt.className = 'li_selected_2';
} else {
opt.className = 'li_unselected';
}
}
});

Trouble with javascript click() method / html

Thank you in advance for looking at this.
My webapp allows a user to select choices from four different drop-down menus. When the user makes a selection, the program successfully performs the following click() function which creates a new span element within a div element:
var activeFilterNames = [];
$('.filter').click(function()
{
if (!this.classList.contains('disabled'))
{
//above checks to see if link has already been clicked
//and is therefore disabled. If not, go ahead.
activeFilterNames.push(this.textContent);
//above adds name of selected link to array
i = activeFilterNames.length;
var newFilter = document.createElement('span');
newFilter.id = activeFilterNames[i-1];
newFilter.className = this.className+" activated";
//above adds a new class to identify the filter as 'activated'
//above retains existing classname to identify
//which of the four filters it came from
newFilter.innerHTML = activeFilterNames[i-1];
//above creates display text to be rendered in browser
document.getElementById('active_filters').appendChild(newFilter);
//above is the div in which span will be appended to other spans.
$("#active_filters > span").removeClass('filter');
//above removes .filter class so that this newly created span does
//not respond to the .filter click() function.
$(this).addClass('disabled');
//above adds 'disabled' class to the originally
//clicked link, causing it to skip this block of code
}
}
);
Everything appears to work fine up to this point (though I may be missing something). Essentially I am creating span elements that come out looking like this in html:
<span id="id_name" class="menu_name activated">Rendered Name</span>
And since the above span does not have the filter class, I then try to create a new function in javascript (just as a test) to make the element responsive:
$('.activated').click(function()
{
alert('hi');
}
);
But no luck. I've tried to re-render the dynamically created elements by nesting div or a inside the span, modifying the code as needed, but still nothing. I would like to keep the span because it's the only way I've found to wrap these dynamically generated elements to a second line within the div (#active_filters) where they are being created.
Can anyone see what I'm doing wrong given that I want to make the activated click() function responsive within each newly created span element?
Your binding will not work if you attempt to bind to DOM elements contained in $('.activated') before creating them. What this usually means is that you need that event listener to bind after creating. If you're dynamically creating DOM elements, you need to do something like this:
var activeFilterNames = [];
$('.filter').click(function()
{
if (!this.classList.contains('disabled'))
{
activeFilterNames.push(this.textContent);
i = activeFilterNames.length;
var newFilter = document.createElement('span');
newFilter.id = activeFilterNames[i-1];
newFilter.className = this.className+" activated";
newFilter.innerHTML = activeFilterNames[i-1];
document.getElementById('active_filters').appendChild(newFilter);
$('.activated').unbind('click');
$('.activated').click(function()
{
alert('hi');
}
);
$("#active_filters > span").removeClass('filter');
$(this).addClass('disabled');
}
}
);
Notice, before binding we unbind. This makes sure that if you do this multiple times, you aren't binding 2, 3, 4 times to the same DOM element.
You need to attach click event on dynamically created elements. In jQuery this can be done using on method if you will pass your selector as second argument and attach click to some parent element, body for example:
$( 'body' ).on( 'click', '.activated', function()
{
alert('hi');
}
);

Dependent selects with Chosen Jquery

I just want to do something very simple, which is a select depending on which option is selected it populates a second select.
I've always done this by hiding/showing selects this way (JS):
$( document ).ready(function() {
$("#select_1").change(function() {
if ($("#select_1").val()=="A") {
$("#select_2").show();
$("#select_3").hide();
}
else if ($("#select_1").val()=="B") {
$("#select_3").show();
$("#select_2").hide();
};
});
But now I'm trying Chosen and it does not work. It removes all Chosen mask and returns the selects to native. I've also tried this (JS):
$(document).ready(function(e) {
$("#select_2").css('visibility','hidden');
$(".chosen").chosen();
$("#select_1").click(function() {
if ($("#select_1").val()=="A") {
$("#select_2").css('visibility','visible');
}
And it doesn't work either. It does not remove the Chosen, but doesn't do anything. Any idea on this? I know it sounds pretty basic by I couldn't find an accurate response to it anywhere.
PS: I'm trying to do it with JS, not via AJAX.
I'm assuming that #select_1 is to have the chosen plugin applied to it. If this is correct, #select_1 is going to have a style of display:none; applied to it, so you not going to register any 'click' events on it.
If you look at the "chosen" documentation, http://harvesthq.github.io/chosen/, you can discover how to register a change handler to your chosen element.
If chosen is applied to #select_2 and #select_3, then toggling the visibility of these two elements is pointless because they are already hidden. The HTML rendered by the chosen plugin will have container elements with IDs of #select_2_chosen and #select_3_chosen - so toggle the visibility of these!
The code below assumes that #select_2 and #select_3 have the class 'chosen'. I am applying the chosen to #select_1 separately so I can bind the change event that is to be unique to it. Finally, I trigger the change event immediately after defining the change handler so that #select_3_chosen will become hidden.
$(".chosen").chosen();
$("#select_1").chosen().change(function () {
var value = $(this).val();
if (value=="A") {
$("#select_2_chosen").css('visibility','visible');
$("#select_3_chosen").css('visibility','hidden');
} else if (value == "B") {
$("#select_2_chosen").css('visibility','hidden');
$("#select_3_chosen").css('visibility','visible');
}
}).trigger('change');

Dynamically adding onchange function to drop down with jQuery

I have a couple of drop down boxes with ids country1, country2, ... When the country is changed in a drop down the value of the country shoudl be displayed in an alert box.
if I add the onchange handler for one box like this it works fine:
$('#country1') .live('change', function(e){
var selectedCountry = e.target.options[e.target.selectedIndex].value;
alert(selectedCountry);
});
But I need to do this dynamically for all drop down boxes so I tried:
$(document).ready(function() {
$('[id^=country]') .each(function(key,element){
$(this).live('change', function(e){
var selectedCountry = e.target.options[e.target.selectedIndex].value;
alert(selectedCountry);
});
});
});
This doesn't work. No syntax error but just nothing happens when the seleted country is changed. I am sure that the each loop is performed a couple of times and the array contains the select boxes.
Any idea on that?
Thanks,
Paul
The reason .live() existed was to account for elements not present when you call the selector.
$('[id^=country]') .each(function(key,element){ iterates over elements that have an id that starts with country, but only those that exist when you run the selector. It won't work for elements that you create after you call .each(), so using .live() wouldn't do you much good.
Use the new style event delegation syntax with that selector and it should work:
$(document).on('change', '[id^=country]', function(e) {
// ...
});
Replace document with the closest parent that doesn't get dynamically generated.
Also, consider adding a class to those elements along with the id attribute.
Instead of incremental ids I'd use a class. Then the live method is deprecated but you may use on with delegation on the closest static parent or on document otherwise.
$('#closestStaticParent').on('change', '.country', function() {
// this applies to all current and future .country elements
});
You don't need an each loop this way; plus events are attached to all the elements in the jQuery collection, in this case all .country elements.

Dropdown Boxes cloned with JQuery don't retain the behaviour of the original

What I am trying to do is clone 3 drop-down boxes and add them beneath the original set.
At the moment it works but the clones do not maintain the functionaility of the original set.
What the originals do is check the selected value of the first drop-down box in order to populate the drop-down lists for the other two.
Fiddle is below but adding the clones doesn't seem to work for some reason I can't figure out, it works on the page I am working on.
http://jsfiddle.net/pV6x5/6/
Thanks,
Martin
UPDATE
updated the fiddle, it was missing the advancedsearch div: http://jsfiddle.net/pV6x5/7/
Use jQuery live to keep the event's bound to the new elements. With live it binds the event to all present and future elements where just defining a handler for change will only bind for the current elements (you can also just reattach the events every time you create an element but why do it when live takes care of it for you)
$tags.live("change",function(){ /* your stuff here */});
UPDATE Here is the change function and if block:
$(document).ready(function()
{
$tags = $("select[name='tags']");
$tags.live("change",function()
{
$operands = $(this).parent().find("select[name='operands']");
$values = $(this).parent().find("select[name='values']");
if ($(this).val() == "agent")
{
$(this).parent().find("select[name='operands'] option").remove();
$("<option>=</option>").appendTo($operands);
$("<option>!=</option>").appendTo($operands);
$(this).parent().find("select[name='values'] option").remove();
$("<option>excel</option>").appendTo($values);
$("<option>msword</option>").appendTo($values);
$("<option>ppt</option>").appendTo($values);
$("<option>pdf</option>").appendTo($values);
$("<option>image</option>").appendTo($values);
$("<option>txt</option>").appendTo($values);
$("<option>html</option>").appendTo($values);
$("<option>csv</option>").appendTo($values);
$("<option>ooxml</option>").appendTo($values);
$("<option>flash</option>").appendTo($values);
$("<option>wmf</option>").appendTo($values);
}
I believe you need to use the .live() bind, so that it attaches the events to the objects made "in the future."
http://api.jquery.com/live/
So rather than .change() you need .live('change')

Categories