We Keep Coding

on('change') function not working

So what I'm trying to do is update the 'topic' selection based on what 'category' a user has chosen. What I'm trying to do is watch for a change event of the attribute 'data-curr_filter' on the element with ID 'category-filter'. My jQuery for each category works as tested via web-inspector, so I believe it has something to do with the .on('change') portion of the function (it doesn't trigger the console.log). The code for this is as follows:
The HTML for search-filter:
<span id="category-filter" class="filter-select" data-target="filter_categories" data-curr_filter="all">
All Categories <i class="fa fa-angle-down"></i></span>
filter by
<span class="filter-select" data-target="filter_topics">
All Topics <i class="fa fa-angle-down"></i>
</span>
The HTML for the 'topics':
<ul class="filter-list" id="filter_topics" aria-labelledby="filter_topics">
<li data-val="affordability" data-cat="communities">Affordability</li>
<li data-val="market_conditions" data-cat="communities">Market Conditions</li>
The jQuery:
$(document).ready(function() {
console.log("Hello Moto");
$(document).on('change', '#category-filter', function() {
console.log("Something change");
if ($('#category-filter').attr('data-curr_filter') == 'all' ){
$('#filter_topics li').show();
}
if ($('#category-filter').attr('data-curr_filter') == 'communities'){
//show all topics as a "blank slate" before altering the display elements according category
$('#filter_topics li').show();
//hide all the elements
$('#filter_topics li').toggle();
//show only the topics labeled with communities
$('#filter_topics li[data-cat=communities').toggle();
}
...

ANSWER:
Just doing an onclick works... Kinda annoyed at how I completely overlooked this.
$(document).on('click', '#filter_categories li', function() {
var selectedCategory = $(this).attr('data-val');
if (selectedCategory == 'all' ){
$('#filter_topics li').show();
}
if (selectedCategory == 'communities'){
//show all topics as a "blank slate" before altering the display elements according category
$('#filter_topics li').show();
//hide all the elements
$('#filter_topics li').toggle();
//show only the topics labeled with communities
$('#filter_topics li[data-cat=communities').toggle();
}
...
TL;DR under my question:
Because it is a <span> and not an <input>, <select> or <textarea> element, it does not have the .on('change') event watcher. If I come up with an answer I'll post it here.

Try this:
//$(document).ready(function() {
$(function() {
console.log("Hello Moto");
//$(document).on('change', '#category-filter[data-curr_filter]', function() {
$('#category-filter').change(function() {
console.log("Something change");
if ($('#category-filter').attr('data-curr_filter') == 'all') {
$('#filter_topics li').show();
}
if ($('#category-filter').attr('data-curr_filter') == 'communities') {
//show all topics as a "blank slate" before altering the display elements according category
$('#filter_topics li').show();
//hide all the elements
$('#filter_topics li').toggle();
//show only the topics labeled with communities
$('#filter_topics li[data-cat=communities').toggle();
}
...`

placeHolder id not displaying using style.display

I'm not sure what exactly is wrong with my code
<ul>
<li>
<p id='placeHolder' style='display: none;'>Empty NOW!</p>
<ul class='list'>
<li>Item One<a href='#' class='clear'>Remove</a></li>
<li>Item Two<a href='#' class='clear'>Remove</a></li>
</ul>
</li>
</ul>
$('a.clear').click(function() {
$(this).parent().remove();
if($('.list li').length == 0) {
document.getElementById('placeHolder').style.display='block';
console.log('its empty now');
}
return false;
});
Let's say you removed the items from the list and li is now ZERO, I'm not sure why placeHolder doesn't actually display the placeHolder?
I used console.log to make sure the length actually checked and it is a valid statement. Any suggestion on why getElementById not firing?

In order to validate your condition $('.list li').length == 0, you have to remove the two list items, either by finding a common selector :
$('li a').click(function() { // the choice of the selector is of course up to you :)
$(this).parent().remove();
if($('.list li').length == 0) {
document.getElementById('placeHolder').style.display='block';
console.log('its empty now');
}
return false;
});
or by removing the parent of the parent : $(this).parent().parent().remove();

Why doesn't my jQuery accordion menu stick?

When a user clicks the Accordion Menu button it usually works. But, about 1 out of 10 times the animation doesn't stick and goes back to either expanded or collapsed, depending on what state it started at. I've copied the scripts from other places, but they seem simple enough.
HTML:
<ul id="system-nav">
<li><div>Umbrella</div>
<ul>
<li>Admin</li>
<li>Dashboard</li>
<li>Daylight</li>
</ul>
</li>
</ul>
Like I've said, I've tried several different versions of the same thing. These were just taken from random places and I've only edited them slightly. All of them do the same thing.
$("#system-nav > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$('#system-nav ul').slideUp(300);
}
$(this).next().slideToggle(300).delay(250);
});
$('#system-nav ul:eq(0)').hide();
$(document).ready(function() {
$('#system-nav li div').click(function() {
$('#system-nav ul').slideUp('slow');
$(this).next().slideDown('slow');
});
$("#system-nav ul").hide();
});
$(document).ready(function(){
$('#system-nav li div').click(function() {
$(this).next().slideDown('slow');
return false;
}).next().hide();
});

In the first JS sample using :visible is not the right proprety. Use :hidden instead
In the second one you're cliping it ?
In the last one you're canceling it ?
Here's a working code: http://jsfiddle.net/Q9qNw/
$("#system-nav").on("click","div",function(){
if ($(this).next().is(":hidden")) {
$(this).next().slideDown("500");
} else {
$(this).next().slideUp("500");
}
});

Javascript, switching images through both mouseover and click

I have some buttons( "ul.subjects li" ) and...
1. change buttons' background-images through mouseover actions
2. can be clicked one button at once.
　So once clicked a button, others are cancelled.
I have two this button lists and switch contents by clicked items(subjects and ages).
I can switch background-images by changing "class" of (class="mat" to class="mat_c").
$(function(){
$(document).delegate("ul.subjects li a", "mouseover", function(){
$(this).data("imgc", $(this).attr("class"));
var regex = /_s/;
if (regex.test($(this).data("imgc")) == false ) {
$(this).attr("class", $(this).data("imgc")+"_c")
}
});
$(document).delegate("ul.subjects li a", "mouseout", function(){
$(this).attr("class", $(this).attr("class").replace(/_c/, ""));
});
});
<ul class="subjects">
<li><a id="mat" class="mat" href="/age=all/sub=mat/"></a>算数・数学</li>
<li><a id="soc" class="soc" href="/age=all/sub=soc/"></a>社会</li>
<li><a id="sci" class="sci" href="/age=all/sub=sci/"></a>理科</li>
<li><a id="eng" class="eng" href="/age=all/sub=eng/"></a>英語</li>
</ul>
While button-click action doesn't work right, trying to change attribute into class="..._s",
but immediately changed into class="..._c".
$(function(){
$(document).delegate("ul.subjects li a", "click", function(){
$("ul.subjects").html($("ul.subjects").html().replace(/_s/g, ""));
$(this).attr("class", $(this).attr("class").replace(/_c/, "_s"));
});
});
Maybe I should control the events or order of them...
and there should be more simple ways to do this. How should I figure this out?
As you can see it on http://jsfiddle.net/MsdGS/1/,
After you click the under list , mouseover action doesn't work right.
Clicked buttons' "class" should be changed to "..._s",
(class="mat" to class="mat_s")
but "..._s" immediately changed to "..._c".
Thanks,

The result (i've removed the href in the bottom ul list)
If i have understood your question correct this is what you need to change:
$(function(){
$("#course_tb").load("/age=all/sub=all/"+"#course_tb");
$(document).delegate("ul.subjects li a", "click", function(){
// iterate through `subjects`'s "a"
$("ul.subjects li a").each(function(index, el){
$(el).attr("class", $(el).attr("class").replace(/_s/g, ""));
});
//html($("ul.subjects").html().replace(/_s/g, ""));
// ...
return false;
} );
} );

Try to use hover to implement mouseover and mouseout, like
$("ul.subjects li a").hover(function() {
$(this).css("background-image", "www.google.com");
}, function() {
$(this).css("background-image", "www.google.com");
});
As you can see, just try to use css:background-image to directly change the background image. This would bypass your problem.
Hope this works for you.
.hover() API

change active li when clicking a link jquery

I want to make a menu, and change the class when clicking.
When i click on the "li" with no class="active", i want jquery to add a class on the empty <li> and remove it from the othes "li".
<li class="active">data</li>
<li>data 2</li>
can somebody help me ? :)

I think you mean this:
$('li > a').click(function() {
$('li').removeClass();
$(this).parent().addClass('active');
});

// When we click on the LI
$("li").click(function(){
// If this isn't already active
if (!$(this).hasClass("active")) {
// Remove the class from anything that is active
$("li.active").removeClass("active");
// And make this active
$(this).addClass("active");
}
});

$('li').click(function()
{
$('li', $(this).parent()).removeClass('active');
$(this).addClass('active');
}

$(window).load(function(){
page=window.location.pathname.split("/").pop();
menuChildren = $('a[href="' + page + '"]');
$(menuChildren).parent('li').addClass('active');
});
The above code will look up the url and pop out the last element (Which is the file name). Then it finds the anchor tag with href attribute which has the same value of the url then it puts an active class for its parent li tag

This should get you close.
$("li").click(function() {
$("li").removeClass("active");
$(this).addClass("active");
});