Develop Reference

jquery - css does not work after .after()

In my html code i change the background color of all elements with the id '#mutable', with a click on button 'blue' or 'red'.
With the third button 'load' i .append() a new HTML with the same id.
But the background color does not change for the new elements?
Whats going wrong?
fiddle
html
<div id="mutable" style="width:50px;height:50px;" class="blue">sjdfhksfh</div>
<div id="newHTML">newHTML</div>
js
$(document).ready(function() {
$('#blue').on('click', function() {
$('#mutable').trigger('blue');
});
$('#red').on('click', function() {
$('#mutable').trigger('red');
});
$('#load').live('click', function(event) {
event.preventDefault();
$('#newHTML').after('<div id=\"mutable\" style=\"width:50px;height:50px;\">...</div>');
event.stopPropagation();
});
$('#mutable').bind('red', function(e) {
$('#mutable').addClass('red').removeClass('blue');
});
$('#mutable').bind('blue', function(e) {
$('#mutable').addClass('blue').removeClass('red');
});
});

You are always creating a new div with the id #mutable. Now jQuery in terms of an ID just runs down the DOM and when it finds the first occurance of your ID, it changes it, but nothing else.
For some solutions, you could use a class .mutable instead of an id - but then every created div would be changed on click.
Or you could enumerate your IDs with a number like #mutable1, #mutable2 and so on and change your menu to select the specific div.
Or, to change just the last occurance of your dynamically created divs, use the :last - CSS- Pseudoclass.

1) id should be unique at page. And selectors like #mutable match only first element with such id -- So after pressing 'load' you create new element with the same id, but $ still match old one
2) try next ( I just change your id-selector into attr-selector which allow find all elements with id ):
$('#mutable').bind('blue', function(e) {
//alert('blue');
$('[id=mutable]:last').addClass('blue').removeClass('red');
});
http://jsfiddle.net/q3wzwr6z/

Function for adding and removing style on click and unfocus

I am trying to implement a function which changes style of element on click and remove it when unfocus. For ex: When element2 is clicked, it should remove class of other elements, and add class to the clicked element only.
<div class="dope" id="element777"></div>
<div class="dope" id="element2"></div>
<div class="dope" id="element11"></div>
<div class="dope" id="element245"></div>
<div class="dope" id="element60"></div>
.....(More are created automatically, numbers are not estimatable)
I couldnt know the element ids that are created. The only remains same is class.
I have tried this, but its an unprofessional approach.
$('#element1').click(function(){
$("#element1").addClass(dope2);
$("#element2").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);
});
$("#element1").blur(function(){
$("#element1").removeClass(dope);
});
$('#element2').click(function(){
$("#element2").addClass(dope2);
$("#element1").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);
});
$("#element2").blur(function(){
$("#element2").removeClass(dope);
});
What is the best approach for automating this function, instead of adding click and blur (unfocus) function to ALL of elements ?

You can listen for click events on any div with an id containing the word "element', then target its siblings elements (those that are not clicked, without referring to them by id). This might do it:
$("div[id*='element']").click(function(){
$(this).addClass('dope').siblings('.dope').removeClass('dope');
});

Your jQuery could be vastly simpler if you leverage this and siblings:
Instead of:
$("#element1").addClass(dope2);
$("#element2").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);
It could be:
$('.dope').click(
function() {
$(this).addClass(dope2).siblings().removeClass(dope);
}
);
NOTE:
Do you have a variable called dope with the class name, or is dope the class name? If it's the classname, you need to put it in quotes: $(this).addClass('dope2'), etc.
If you are removing the class dope, then will want to add a class you can always use to select these elements (so that when you remove dope, it continues to work).

Button part:
$("div").click(function(){
if($(this).hasClass("dope") || $(this).hasClass("dope2")){
$(this).addClass("dope2");
$(".dope").not($(this)).removeClass("dope");
}
})
Blur part:
$("div").blur(function(){
if($(this).hasClass("dope") || $(this).hasClass("dope2")){
$(this).removeClass("dope");
}
}

I would recommend using the :focus css selector rather than using javascript to do what you are doing... Read more here. Instead of having a click listener, the focus selector will take care of that for you and automatically remove the styling when the element is out of focus.

I'm having difficulty appending a class

I originally couldn't think of a way to append an additional class to an li element which had a class that other li elements had. I wanted to only add a class to that specific li element that I clicked a select button on and the solution was "On the click of the button, you can use .closest() to find the ancestor li element". The solution was a jquery solution and it works fine but now I'm having an additional problem. First, here's what I originally posted and the solution I was given along with the fiddle and then I will explain what my new problem is and would appreciate the help. So my original post:
"Ok so my script allows me to input text in a textarea element and add it to a li element within an ordered list with the id "Glist". Not only is text added to each li I add to the ordered list, but the additional things below are added as well and they all just display additional images using CSS. One of the classes, "Selimg" displays a sprite image of a button that says "select". Now each li element I add to my ol has all of the elements below as well as the classes. So each li element will have a div with a "Selimg" class that displays an image of a button that says select for example. When I click this div with the class Selimg, a new class named "Selected" will be added to the div which will change the background color of the li to indicate that it has been selected. The problem is, I want to only add the "Selected" class to the div with the Selimg class that I've clicked, not all li elements with "Selimg" classes. How can I do that with an onclick event handler or any other way using js or jquery? Here's the html:
<ol id="GList">
<li class="MyList">
<p class="bulletp"></p>
<!--This Selimg class displays an image of a button that says select-->
<div class="Selimg"></div>
<!--When a user presses this select button, I want to append a class only to the specific li element the user has pressed the select button on. -->
<div class="edit1"></div>
<div class="Del"></div>
<div class="progress"></div>
<div class="ShowMore"></div>
<div class="CheckedGoal"></div>
<div class="PCompetePercent"></div>
<div class="ShowMoreBlock"></div>
<div class="goalTxt"></div>
</li>
</ol>
The solution I was given:
"On the click of the button, you can use .closest() to find the ancestor li element"
$('.Selimg').click( function() {
$(this).closest('li').addClass('someclasss')
//or $(this).parent().addClass('someclasss') since the li is the parent of the button
})
here's the fiddle demonstrating the solution: http://jsfiddle.net/arunpjohny/fSMDv/2/
And now for the new issue. For some reason, the jquery solution was not working on it's own. Somehow, the jquery code above only worked when I placed it into a js function like this:
<script>
function runSel() {
var $li = $('.Selimg').closest('li').addClass('liselected');
$li.siblings().removeClass('liselected');
}
</script>
I also have a function that's called whenever I want to add another item to the list.
//This is only the part of the code that creates the div that I style to look like and be used as a button that says select. There's more code that also creates the li element itself and a few additional things but all for design. Nothing important.
var Selimg = document.createElement('div');
Selimg.setAttribute("class", "Selimg");
Selimg.setAttribute("onclick", "runSel();");
entry.appendChild(Selimg);
What this does is, create the div with the class "Selimg" which will be an image of a select button added to my list item and then it's given the onclick attribute that calls the runSel() function above as you can see. It works. However it only works once. The fiddle example demonstrates what I'm looking for. So now, when I add an item to the list, and click the select button on it, the function "runSel" is called which adds a class called "liselected" and liselected just changes the background color because the rules for each property in the css, have "!important" so the background color overrides the current one. It works, but like I said it only works once. After I add another item, and press the Select button on that one (which is made from the styles from the Selimg class), the liselected class is removed from the other li element yet the second li element that I just clicked the select button on, only causes the liselected class to be removed from the first but it's not added after that to the second li item, the current one. So, when i add multiple li, they will contain things like text and a div styled to look like a button that says "select" and so when I click "select" on an li, I want then for that specific li to have the liselected class appended and when I select the "select" button on another li, I want the class liselected to be removed from the other li element it was on and added to that one.

The jQuery solution will work fine... the problem is you are dealing with dynamically created elements... so need to use event delegation
$(document).on('click', '.Selimg', function() {
$(this).closest('li').addClass('someclasss')
//or $(this).parent().addClass('someclasss') since the li is the parent of the button
})
Also from what I understand you have not added the script in a dom ready handler
Demo: Fiddle

Not sure why you have written a book for such a small issue. I mean, I got tired of reading what you wrote after the first 30 lines of not getting to the point of the question.
Use: $(this).parent('li').addClass("...") instead.
jsFiddle

Change current li class (the one who is clicked)

I have many li(list) items which are generated by a loop thanks to java servlets, now
I want to change the class of the current li(list) which is selected
$('li.doBlokkeer').click(function(e) {
$('.doBlokkeer').addClass('doDEBlokkeer').removeClass('doBlokkeer');
});
so if a current li is selected its class need to be changed (it needs to have doDEBlokkeer).
The above code works.. but it changes ALL my li items... so guys do you know how to change the class of the current item $(this) ? I have no jquery skill, pls help me out. Thanks!!

You need to use $(this) instead of $('.doBlokkeer') in the click event handler. As $('.doBlokkeer') will return all the elements having class doBlokkeer where as $(this) represents the jQuery object that is source of the event.
Live Demo
$('li.doBlokkeer').click(function(e) {
$(this).addClass('doDEBlokkeer').removeClass('doBlokkeer');
});
You can also try using toggleClass to switch between two classes.
Live Demmo
$('li.doBlokkeer').click(function(e) {
$(this).toggleClass('doDEBlokkeer');
});

jQuery click function using same classes

I have a dropdown function that I need to work only on the div clicked, not all (I have 14+ of the same classes on the page that need to be displayed when a certain one is clicked)
At the moment my jQuery is as follows.
$('.qacollapsed').hide();
$('.qa').click(function () {
$('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});
Of course, that is toggling all qacollapsed classes when there is 14 on the page (Q&A)
Is there a way for it to only drop down the one that is clicked?
the HTML
<div class="qa">
<h4 class="question"> </h4>
</div>
<div class="qacollapsed">
<p> </p>
</div>

It would be helpful to provide a snippet of HTML here, but I'll take a guess at the structure of your markup for now..
Instead of referencing all .qacollapsed elements, you need find elements that are close to the .qa that was clicked, e.g.:
$('.qa').click(function () {
$(this) // start with the clicked element
.find('.qacollapsed') // find child .qacollapsed elements only
.slideToggle();
$(this).toggleClass('active');
});
This will work if .qacollapsed is inside .qa - if not, you might need to use next (for siblings), or one of the other jQuery tree traversal methods.

Yo could find() it or use this as a context in the selector to choose only a descendent of the clicked object
$('.qa').click(function () {
$('.qacollapsed', this).slideToggle();
//You could do $(this).find('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});

Check out the jQuery selectors and why not just use $(this)?

$('.qacollapsed').hide();
$('.qa').click(function () {
$(this).toggleClass('active').next().slideToggle();
});

Personally, I'd give all the divs IDs, the clickable bit being the ID of the question in the database for example, and the answer just being id='ID_answer' or something, then use jquery to slide in the div with the id corresponding to the link clicked, ie
Var showIt = $(this).attr('id') + '_answer'
$('.qacollapsed').not('#'+showIt).hide();
$('#'+showIt).slideToggle;
That will hide all the divs without that ID and show the required one.
Dexter's use of .next above looks simpler though, I've not tried that as being relatively new to jquery too.