i am trying to make a to do list app. When i click a span with class "check" then i want to apply a style. Then the class of the span will change to "uncheck". When click the uncheck then the previous style will restore. Here is the html and jquery what i have done so far.
Problem: Problem is when i first click the span it works The "uncheck" class get removed and "check" class get added. Then the second part not works. I suspect the second part don't working because the "check" class is not in the dom when document.ready() is runs.
Any help will be greatly appreciated! Thanks!
HTML:
<div class="note-body">
<ol>
<li>M2u category shown. M2u category shown M2u category shown M2u category shown.
<span title="Delete" class="delete"></span>
<span title="Task Done!" class="done"></span>
<span class="handle"></span>
<span class="handle"></span>
</li>
<li>M2u category shown</li>
<li>M2u category shown</li>
</ol>
</div>
jQuery:
$('.note-body ol li span.check').click(function(){
$(this).addClass('uncheck').removeClass('check');
$(this).parent().css({'text-decoration':'line-through', 'color':'#5b382e'});
});
$('.note-body ol li span.uncheck').click(function(){
$(this).addClass('check').removeClass('uncheck');
$(this).parent().css({'text-decoration':'none', 'color':'#5b382e'});
});
RESOLVED:
Had to use the live(); because i am adding dom dynamically. Here is the final code (placed the styles in classes):
$('.note-body ol li span.check').live('click', function(){
$(this).addClass('uncheck').removeClass('check');
$(this).parent().addClass('task-done').removeClass('task-notdone');
});
$('.note-body ol li span.uncheck').live('click', function(){
$(this).addClass('check').removeClass('uncheck');
$(this).parent().addClass('task-notdone').removeClass('task-done');
});
You are correct. Since the 'uncheck' class is dynamically added to the DOM, you need to use the jQuery live API. Try this:
$('.note-body ol li span.uncheck').live('click', function(){
$(this).addClass('check').removeClass('uncheck');
$(this).parent().css({'text-decoration':'none', 'color':'#5b382e'});
});
use jquery live or delegate as they are added runtime
http://api.jquery.com/live/
http://api.jquery.com/delegate/
Do you really need an uncheck class? Are there three states check, uncheck and 'nothing'? Getting rid of the uncheck class you could simplify your code.
I would do:
$('.note-body .some_other_identifier').live('click', function() {
$(this).parent().toggleClass('check');
});
Adding
.some_other_identifier {'text-decoration':'line-through'; 'color':'#5b382e'; }
.check .some_other_identifier { 'text-decoration':'none'; 'color':'#5b382e'; }
to your css.
Related
I want to prevent an anchor link to open on the document body and instead render inside a div. I've used e.preventDefault() but I think JQuery isn't targeting that event.
I'm programmatic-ly creating a ul and appending li's to it from array items then appending the ul to a div. The structure looks like this:
//this is just a structure, not the actual HTML
<div id="results">
<ul> .ulStyle
<li> .list-group-item
-header
-p .lead
-a .anchorStyle
</li>
</ul>
</div>
Then, I add classes to each element. Everything but the ul is getting the class and I think that may be why it's not targeting the anchors.
jQuery:
$(function(){
console.info('** anchor-tag click handler **')
/*
I've tried variations on the targeting from a
single $('.anchorStyle') to what you see below.
*/
$('div #results ul .ulStyle li .list-group-item a .anchorStyle')
.click(function(e) {
e.preventDefault();
$('#results').empty();
$('#results').load( this.getAttribute('href') );
console.log('anchor clicked...');
});
});
I get the first console message on reload but not the second on click.
Questions:
Do I need a class on the ul to target it properly? I'm only adding
it to the ul for that purpose.
Does this piece of code execute with everything else and the ul may not have been created yet? JS/jQuery should
still bind and keep listening to an event if it exists - or in this
case, find the element I'm targeting after the click event fires,
no?
Couple of problems in the code to point out...
First is that the selectors are not right. You have a space after your element and it's class which is wrong (Eg:ul .ulStyle here .ulStyle is considered as a child of ul).The selector must be like this
$('div#results ul.ulStyle li.list-group-item a.anchorStyle')
Notice I have removed the spaces between the element and it's class..
Even after getting this changes done it still won't work for you because the elements are added dynamically. Taking this line from the OP
I'm programmatic-ly creating a ul and appending li's to it from array items then appending the ul to a div.
So this calls for a need to use event delegation
The syntax must change to
$(document).on('click','div#results ul.ulStyle li.list-group-item a.anchorStyle',function(){//your stuff here});
Further you can keep the selector simple as
'#results a.anchorStyle'
Here you have a working example with your structure:
$('#results ul li a').click(function(e){
e.preventDefault();
console.log(this.href);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
<ul>
<li>
<header>HEADER</header>
<p></p>
ANCHOR
</li>
</ul>
</div>
I'm a little stuck here. I have a ul menu of links. When a user selects from this list, I'm calling up content from another page with ajax. I want to grab a data attribute (data-flag) from the selected anchor and add that attribute as a class to the div that holds the ajax content (#fourteen). The adding class piece is working fine. However, when a new item is selected from the ul menu, I can't seem to remove the other classes from the content div. With each click, it just adds more classes.
Here's my code.
<ul id="langtest" class="tp_lang2">
<li>English</li>
<li>中文(简体)</li>
<li>Nederlands</li>
<li>Français</li>
</ul>
<div id="fourteen" class="cn">
<div id="content">
<div class="main-content">Content being served up here.
</div>
</div>
</div>
<script>
jQuery("ul#langtest li a").click(function() {
jQuery('#fourteen').load($(this).attr("href") + " #content");
jQuery('#fourteen').removeClass.not(this).attr("data-flag");
jQuery('#fourteen').addClass($(this).attr("data-flag"));
return false;
});
</script>
You just need to remove all class in the element like so :
// remove all class
jQuery('#fourteen').removeClass();
// then add class name with data flag selected anchor only
jQuery('#fourteen').addClass($(this).attr("data-flag"));
DEMO(inspect element to see the class actually added & removed)
Your removeClass seems not perfect. Do it like below.
jQuery('#fourteen').removeClass();
On dynamically added element you have to use delegate event binding.
jQuery(document).on("click","ul#langtest li a",function() {
jQuery('#fourteen').load($(this).attr("href") + " #content");
//also change your removeClass code
jQuery('#fourteen').removeClass();
jQuery('#fourteen').addClass($(this).attr("data-flag"));
return false;
});
I have a dropdown list where there are multiple items with class "dropdown" and "menu". On click event I want javascript to find the certain .dropdown that I clicked. Is it possible to implement "this" somewhere on my code and make it work?
$(".dropdown").click(function(e) {
e.preventDefault();
if ($(".menu").is(":visible")) {
$(".menu").slideUp();
$(this).find("li").children(".list").addClass("plus").removeClass("minus");
} else {
$(".menu").slideDown();
$(this).find("li").children(".list").removeClass("plus").addClass("minus");
}
});
Edited afterwards:
So this is my list (please don't pay attention to the fact that "a" is outside of "li"). So I need to find closest "menu" to "dropdown". Already tried closest, find etc. but nothing I tried did the trick. Any suggestions?
<a class="dropdown" href=""><li>Link 1 <div class="plus"></div></li></a>
<ul class="menu">
....
Within the event handling function, this will be set to the element that was clicked.
If that does not help, you should provide more information in your question.
jQuery uses CSS selectors so just do $(".dropdown > .menu") to select the first .menu following a .dropdown. or $(".dropdown .menu:first-child")
edit:
$(".dropdown").click(function()
{
var theNextMenu = $(this).next(".menu");
}
I have a drop down menu that returns results after a selection. The user can then click a link, cloning the dropdown menu, and choose another selection that will return more results. The structure of the results div is as follows:
<ul>
<li class="red">
<span> some html content</span>
</li>
<li class="red">
<span> some html content</span>
</li>
</ul>
I would like the user to click an li and change the background color. The user should only be able to change the color of one li at a time. I am able to accomplish this first part using:
$("li.red, li.blue").live("click",function() {
var $this, c;
$this = $(this);
c = $this.hasClass("red")
? {us: "blue", them: "red" }
: {us: "red", them: "blue" };
$("li." + c.us).removeClass(c.us).addClass(c.them);
$this.removeClass(c.them).addClass(c.us);
});
The problem is that when the user adds another selection (and the previous dropdown is cloned using jquery), and clicks an li in that results div, the previous selection is unselected. I want the user to be able to change the background of the li for the first set of results, as well as change the background for the second set of results. So each set of results would be able to toggle background colors between only that particular ul.
Any help is much appreciated!
Try this...
$("ul").on("click", "li", function() {
$(this).parent().find("li").removeClass("red").addClass("blue");
$(this).toggleClass("red").toggleClass("blue");
});
jsFiddle example... http://jsfiddle.net/L34pT/3/
Giving the ul a class name or ID would make sure it only affects the list in question. It looks a little pointless, but I used parent and find so that you only have to change the ul selector if you do give it a class or ID, and it will still work.
Try to use on() instead of live():
$(document).on("click","li.red, li.blue",function() {
...
});
Sorry if the title isn't clear enough, I have five <li>'s in each <li> I have <a> and a <div> and in each <div> I have a <ul>with a class of "config". Then in that I have two <li>.
I use jQuery to hide the <ul> with the class of config and then use slideToggle to show/hide them. The problem is, It shows all of them. I want to just click one link and the appropriate <div> or <ul> should appear, not all of them. How can I do this?
So far I have:
$(document).ready(function(){
$("ul.config").hide();
$("li:nth-child(1) a").click(function(){
$("li ul.config:first").slideToggle(300);
});
});
But that only shows the very first list. How can I show each one when it's clicked?
With not sure of what the HTML really is, try
$(document).ready(function(){
$("ul.config").hide();
$("li:nth-child(1) a").click(function(){
$(this).parent().find('ul.config').slideToggle(300);
});
});
put a class/id to your top-most ul (before 5 top li), e.g: id="topmenu"
$(document).ready(function(){
$("ul.config").hide();
$("#topmenu li a").click(function(){
$(this).parent().find('ul.config').slideToggle(300);
});
});