Develop Reference

jQuery slideDown not working on element with dynamically assigned id

EDIT: I cleaned up the code a bit and narrowed down the problem.
So I'm working on a Wordpress site, and I'm trying to incorporate drop-downs into my menu on mobile, which means I have to use jQuery to assign classes and id's to my already existing elements. I have this code that already works on premade HTML, but fails on dynamically created id's.
Here is the code:
...
var menuCount = 0;
var contentCount = 0;
//find the mobile menu items
var submenus = $('[title="submenu"]');
if (submenus.length && submenus.parent('.fusion-mobile-nav-item')) {
console.log(submenus);
submenus.addClass('dropdown-title').append('<i id="dropdown-angle" class="fa fa-angle-down" aria-hidden="true"></i>');
submenus.each(function() {
$(this).attr("href", "#m" + menuCount++);
})
var content = submenus.parent().find('ul.sub-menu');
content.addClass('dropdown-content');
content.each(function() {
$(this).attr("id", "m" + contentCount++);
})
}
$(document).on('click', '.dropdown-title', function(e) {
var currentAttrValue = $(this).attr('href');
if ($(e.target).is('.d-active') || $(e.target).parent('.dropdown-title').is('.d-active')) {
$(this).removeClass('d-active');
$(currentAttrValue).slideUp(300).removeClass('d-open');
} else {
$('.dropdown-title').removeClass('d-active');
$('.dropdown-content').slideUp(300).removeClass('d-open');
$(this).addClass('d-active');
console.log($(currentAttrValue));
//THIS LINE FAILS
$(currentAttrValue).slideDown(300).addClass('d-open');
}
e.preventDefault();
});
I've registered the elements with the class dropdown-title using $(document).on(...) but I can't figure out what I need to do to register the elements with the custom ID's. I've tried putting the event callback inside the .each functions, I've tried making custom events to trigger, but none of them will get the 2nd to last line of code to trigger. There's no errors in the console, and when I console log the selector I get this:
[ul#m0.sub-menu.dropdown-content, context: document, selector: "#m0"]
0
:
ul#m0.sub-menu.dropdown-content
context
:
document
length
:
1
selector
:
"#m0"
proto
:
Object[0]
So jQuery knows the element is there, I just can't figure out how to register it...or maybe it's something I'm not thinking of, I don't know.

If you are creating your elements dynamically, you should be assigning the .on 'click' after creating those elements. Just declare the 'on click' callback code you posted after adding the ids and classes instead of when the page loads, so it gets attached to the elements with .dropdown-title class.
Check this jsFiddle: https://jsfiddle.net/6zayouxc/
EDIT: Your edited JS code works... There also might be some problem with your HTML or CSS, are you hiding your submenus? Make sure you are not making them transparent.

You're trying to call a function for a attribute, instead of the element. You probably want $(this).slideDown(300).addClass('d-active'); (also then you don't need $(this).addClass('d-active'); before)

Inside submenus.each loop add your callback listener.
As you are adding the class dropdown-title dynamically, it was not available at dom loading time, that is why event listener was not attached with those elemnts.
var menuCount = 0;
var contentCount = 0;
//find the mobile menu items
var submenus = $('[title="submenu"]');
if (submenus.length && submenus.parent('.fusion-mobile-nav-item')) {
console.log(submenus);
submenus.addClass('dropdown-title').append('<i id="dropdown-angle" class="fa fa-angle-down" aria-hidden="true"></i>');
submenus.each(function() {
$(this).attr("href", "#m" + menuCount++);
// add callback here
$(this).click( function(e) {
var currentAttrValue = $(this).attr('href');
if ($(e.target).is('.d-active') || $(e.target).parent('.dropdown-title').is('.d-active')) {
$(this).removeClass('d-active');
$(currentAttrValue).slideUp(300).removeClass('d-open');
} else {
$('.dropdown-title').removeClass('d-active');
$('.dropdown-content').slideUp(300).removeClass('d-open');
$(this).addClass('d-active');
console.log($(currentAttrValue));
$(currentAttrValue).slideDown(300).addClass('d-active');
}
e.preventDefault();
});
})
var content = submenus.parent().find('ul.sub-menu');
content.addClass('dropdown-content');
content.each(function() {
$(this).attr("id", "m" + contentCount++);
})
}

Turns out my problem is that jQuery is adding to both the mobile menu and the desktop menu, where the desktop menu is being loaded first when I search for that ID that's the one that jQuery finds. So it turns out I was completely wrong about my suspicions.

Jquery hover event stuck on clone elements

I am creating an plugin with wordpress for the portfolio items. Everything works fine . But the issue is when i apply the filter the hover effect stopped working on the cloned items
also available JS FIDDLE
the jquery code is given below i tried
/* Scroll to Top Button */
jQuery(document).ready(function() {
// Animate Box Shadow on some elements
// Add the overlay. We don't need it in HTML so we create it here
// Clone portfolio items to get a second collection for Quicksand plugin
var $portfolioClone = jQuery(".rudra-portfolio").clone(true);
// Attempt to call Quicksand on every click event handler
jQuery(".rudra-portfolio-filter a").click(function(e) {
jQuery(".rudra-portfolio-filter li").removeClass("current");
// Get the class attribute value of the clicked link
var $filterClass = jQuery(this).parent().attr("class");
if ($filterClass == "all") {
var $filteredPortfolio = $portfolioClone.find("li");
} else {
var $filteredPortfolio = $portfolioClone.find("li[data-type~=" + $filterClass + "]");
}
// Call quicksand
jQuery("ul.rudra-portfolio").quicksand($filteredPortfolio, {
duration: 500,
easing: 'easeInOutQuad'
});
jQuery(this).parent().addClass("current");
// Prevent the browser jump to the link anchor
e.preventDefault();
})
jQuery(".port-li").click(function() {
jQuery(this).find('.content-wrapper').slideDown();
});
jQuery(".overeffect").mouseover(function() {
jQuery(this).find('.content-wrapper').slideDown();
});
jQuery("#portfolio-grid li").mouseleave(function() {
jQuery('.content-wrapper').slideUp(500);
});
});
hour effect is working fine for first and second time , but after that it stopped working .
Update
I also tried this Jquery clone

solved by me ..
i just need to use this
jQuery(document).on('hover',".overeffect",function(){
jQuery(this).find('.content-wrapper').slideDown();
});

Transfer data from one page to another jQuery Mobile

I using PhoneGap to create a Geolocation App following this excellent tutorial (link). Unfortunatelly, I'm having an issue that I can't figure out. The relevant parts that are giving me a headache are these:
//Section 1
$('#history').on('pageshow', function () {
tracks_recorded = window.localStorage.length;
$("#tracks_recorded").html("<strong>" + tracks_recorded + "</strong> workout(s) recorded");
$("#history_tracklist").empty();
for (i = 0; i < tracks_recorded; i++) {
$("#history_tracklist").append("<li><a href='#track_info' data-ajax='false'>" + window.localStorage.key(i) + "</a></li>");
}
$("#history_tracklist").listview('refresh');
});
//Section 2
$("#history_tracklist li a").on('click', function () {
$("#track_info").attr("track_id", $(this).text());
});
//Section 3
$('#track_info').on('pageshow', function () {
var key = $(this).attr("track_id");
$("#track_info div[data-role=header] h1").text(key);
var data = window.localStorage.getItem(key);
data = JSON.parse(data);
});
Section 1 works just fine, the data is stored, and the list is created without any issues. But then in Section 2 is when everything goes to hell. By clicking on the element, a new attribute (track_id) is supposed to be created, but it doesn't. Therefore, in Section 3, the "var key" won't get a value, and as a consequence, "var data" will be null also. As you can imagine, nothing works from there. What am I doing wrong here? I only included what I considered the relevant code, but if more is needed I'll do so. Thansk!

In section 2, I think you just need to delegate click handling to the "#history_tracklist" container, as follows :
$("#history_tracklist").on('click', "li a", function () {
$("#track_info").attr("track_id", $(this).text());
});
Without delegation you have a rule saying :
when any existing li a element within #history_tracklist is clicked execute my function
With delegation, you have a rule saying :
when any existing or future li a element within #history_tracklist is clicked execute my function

jQuery slide changing with index and fadeout -- jumpiness

I am working on a jQuery slideshow plugin. One of my methods involves switching back and forth between pictures. I have been pretty successful in creating it, here is an isolated case with the code thus far for the particular method:
var images = $("#simpleslides").children("img");
$(".slideButtons ul li").on("click", "a", function() {
var anchorIndex = $(this).parent().index();
var $activeSlide = $("#simpleslides img:visible");
var $targetSlide = $(images[anchorIndex]);
if($activeSlide.attr("src") == $targetSlide.attr("src") || $targetSlide.is(":animated")) {
return false;
} else {
$activeSlide.css({ "z-index" : 0 });
$targetSlide.css({ "z-index" : 1 });
$targetSlide.stop().fadeIn("slow", function() {
$activeSlide.hide();
});
}
});
Here is a fiddle to see it in working action: http://jsfiddle.net/ase3E/
For the most part, this works as you would expect it to. When a user clicks on the corresponding number, it fades in the picture.
However, I am running into some jumpiness and occasionally a complete hide of the slides when I am clicking around quickly. If you play with the fiddle, you will see what I am referring to Try clicking around on each image to see.
I have adopted stop which I thought would fix the problem but has not. I have put the hide method after the fadeIn callback, but that has also not helped the situation.
What am I doing wrong here??

LIVE DEMO :)
var images = $("#simpleslides").find("img");
$(".slideButtons ul").on("click", "li", function(e) {
e.preventDefault();
var i = $(this).index();
images.eq(i).stop().fadeTo(500,1).siblings('img').fadeTo(500,0);
});

How to Expand All/Collapse All Using Adi Palaz's Nested Accordion

Adi Palaz's Nested Accordion
This seems like it should be simple but I can't seem to figure this out and I have been sitting here slamming my head on my desk after like four hours without a solution.
You will notice in the demo on the page that there are expand all/collapse all buttons that fire a function to open all the accordion panels or close them.
I DON'T want to use those buttons. I want to write my own function and fire the expand all or collapse all function after the user completes a gesture on a DIV somewhere else on the page.
But I can't seem to figure out how to call the same function the author is using on the buttons to properly expand and collapse the accordion panels.
If it helps, I set up a test page to play with:
http://dl.dropbox.com/u/22224/Newfolder/nested_accordion_demo3.html
And here are the two scripts it needs to work:
Nested Accordion Script
Expand.js
Please help! I am desperate and the author is not responding to emails!

I was able to solve the expand/collapse all problem with the following code, hope it will work for you as well.
function expand(id) {
var o = $.extend({}, $.fn.accordion.defaults, null);
var containerID = o.container ? id : '', objID = o.objID ? o.objID : o.obj + o.objClass, Obj = o.container ? containerID + ' ' + objID : id, El = Obj + ' ' + o.el, hTimeout = null;
$(El + ' a.trigger').closest(o.wrapper).find('> ' + o.next).show().closest(o.wrapper).find('a.trigger').addClass('open').data('state', 1);
}
function collapse(id) {
var o = $.extend({}, $.fn.accordion.defaults, null);
var containerID = o.container ? id : '', objID = o.objID ? o.objID : o.obj + o.objClass, Obj = o.container ? containerID + ' ' + objID : id, El = Obj + ' ' + o.el, hTimeout = null;
$(El + ' a.trigger').closest(o.wrapper).find('> ' + o.next).not('.shown').hide().closest(o.wrapper).find('a.open').removeClass('open').data('state', 0);
}
Example:
expand('#accordion1');
collapse('#accordion1');

I'm faced with the exact same problem and would like to know if you ever found an answer?
The work around I plan to use is something like $('.accordion a').click(); to programmatically click each link in the list - not pretty but it seems to work...

Two years later and I have the same desire... use Adi Palaz nested accordion, but have my OWN styled and specific action expand/collapse all buttons. I did finally get it to work the way I wanted even though I am admittedly a novice level jquery programmer. Here's my key learnings:
I started with example nested_accordion_demo5.html with the #acc1
example. I did not use expand.js at all, I never could get it to
work.
I changed the function defaults in my demo5.html to add the obj: "div".
$("#acc1").accordion({
obj: "div",
el: ".h",
head: "h4, h5",
next: "div",
iconTrigger: true
});
Then I added a div with class="accordion" around the whole ul structure and removed the accordion class from the ul.
I made my own two expand/collapse links and put them inside the div but before the ul. Later I got fancy and added styling to make them look like buttons, but first I got it working.
[Expand All] [Collapse All]
Then I added two new separate event handlers to jquery.nestedAccordion.js using snippets from the one that handles the a.trigger events. I placed them immediately after the existing event handler. Here's my new CollapseAll:
$(Obj).delegate('a.CollapseAll', ev, function(ev) {
$( o.obj + o.objClass ).find('a.trigger').each(function() {
var $thislink = $(this), $thisWrapper = $thislink.closest(o.wrapper), $nextEl = $thisWrapper.find('> ' + o.next);
if (($nextEl).length && $thislink.data('state') && (o.collapsible)) {
$thislink.removeClass('open');
$nextEl.filter(':visible')[o.hideMethod](o.hideSpeed, function() {$thislink.data('state', 0);});
}
});
});
Then I made a second event handler that does the ExpandAll.
I know this could likely be much more efficient, but I am thrilled to at least have it working given my skill level!