We Keep Coding

How can I hide a div that I've just added with a click?

I'm appending some HTML to my button on a click, like this:
jQuery(document).ready(function($) {
$('#sprout-view-grant-access-button').on('click', function(e) {
$(this).toggleClass('request-help-cta-transition', 1000, 'easeOutSine');
var callback = $(e.currentTarget).attr('data-grant-access-callback');
var wrapper = $('.dynamic-container');
console.log(wrapper);
if( typeof window[callback] !== 'function') {
console.log('Callback not exist: %s', callback);
}
var already_exists = wrapper.find('.main-grant-access');
console.log(already_exists);
if( already_exists.length ) {
already_exists.remove();
}
var markup = $(window[callback](e.currentTarget));
wrapper.append(markup);
});
});
function generate_grant_access_container_markup() {
var contact_data_array = contact_data;
var template = jQuery('#template-sprout-grant-access-container')
return mustache(template.html(), {
test: 's'
});
}
As per the code, whatever comes from generate_grant_access_container_markup will be put inside dynamic-container and shown.
My problem is that, the newly added code just doesn't wanna dissapear upon clicking (toggle) of the button once again.
Here's my syntax / mustache template:
<script type="template/mustache" id="template-sprout-grant-access-container">
<p class="main-grant-access">{{{test}}}</p>
</script>
And here's the container:
<div class="button-nice request-help-cta" id="sprout-view-grant-access-button" data-grant-access-callback="generate_grant_access_container_markup">
Grant Devs Access
<div class="dynamic-container"></div>
</div>
I understand that the click event only knows about items that are in the DOM at the moment of the click, but how can I make it aware of everything that gets added after?

I would recommend visibility: hidden. Both display none and removing elements from the dom mess with the flow of the website. You can be sure you would not affect the design with visibility: hidden.
I don't deal with Jquery at all but it seems like this Stack overflow covers the method to set it up well.
Equivalent of jQuery .hide() to set visibility: hidden

Multiple Owl V2 sliders using single javascript declaration and .each()

Been trying various things, and searched around expecting others to have done the same, but getting nowhere fast .. the best result i've got is the first instance of the carousel working, but all the rest do not. Why is the .each() function not working?
Note: the main aim is to have multiple carousels with one block of .js control .. the script pulls the individual carousel instance variables such as number of items to show, delay, if lazy-load or not, theme classes, etc from each instance based on the data-variable="xyz" values ... and it works fine with individually identified (used unique classes or ID's) carousels on the page, but not this (more efficient) multi method.
As you see i've tried to find the carousels based on the common class ".galleryowlmulti", then find their parent container ID to uniquely identify it (as i thought this is the issue?) and then apply the variables to each carousel instance. Hope that makes sense?
Example HTML Snippet of one slider repeated in the same page but with unique ID's (please note that ".owl-carousel" is not needed where I use ".owlcarousel") :
<span id="unique-id1" class="slider">
<span class="titleh3">Title</span>
<div class="galleryowlmulti" data-owlitemshow="8" data-owlmargin="10" data-owltimeout="4000" data-owllazy="true" data-owldots="false" data-owlautoplay="false" data-owlslideby="page" data-owlthemes="owltheme-smallnav">
<div class="owlcarousel">
<div class="item">1st slide</div>
<div class="item">2nd slide</div>
</div>
</div>
</span>
<span id="unique-id2" class="slider">
<span class="titleh3">Title</span>
<div class="galleryowlmulti" data-owlitemshow="8" data-owlmargin="10" data-owltimeout="4000" data-owllazy="true" data-owldots="false" data-owlautoplay="false" data-owlslideby="page" data-owlthemes="owltheme-smallnav">
<div class="owlcarousel">
<div class="item">1st slide</div>
<div class="item">2nd slide</div>
</div>
</div>
</span>
The JavaScript:
$(function () {
$('.galleryowlmulti').each(function() {
// *** declare identifier? ***
var owl_id = $(this).closest('.slider').prop('id'); // .attr('id'); // .prop('id');
var owl_declare = $('#' + owl_id + ' .galleryowlmulti'); // owl_id.find('.galleryowlmulti'); // $('#' + owl_id + ' .galleryowlmulti'),
var owl_instance = $('#' + owl_id + ' .owlcarousel'); // $(".owlcarousel", this) // owl_id.find('.owlcarousel'); // $('#' + owl_id + ' .owlcarousel');
// pull variables from page
var owl_owlthemes = owl_declare.data('owlthemes'),
owl_owlitemshow = owl_declare.data('owlitemshow'),
owl_owllazy = owl_declare.data('owllazy'),
owl_owlmargin = owl_declare.data('owlmargin'),
owl_owldots = owl_declare.data('owldots'),
owl_owlautoplay = owl_declare.data('owlautoplay'),
owl_owltimeout = owl_declare.data('owltimeout'),
owl_slidebyf = owl_declare.data('owlslideby');
// calc the items to show breaks
var owl_owlitemshow75=Math.round(owl_owlitemshow*0.75),
owl_owlitemshow50=Math.round(owl_owlitemshow*0.5),
owl_owlitemshow25=Math.round(owl_owlitemshow*0.25);
// calculate item count
var item_count = parseInt(owl_instance.find('.item').length);
var true_false = 0;
if (item_count <=1) {true_false = false; owl_owldots = false;} else {true_false = true;}
//
// control nav visiblity thumbs shown vs thumbs allowed visible
// see: http://stackoverflow.com/a/33252395/3794783
// owl_instance.on('initialized.owl.carousel resized.owl.carousel', function(e) {
// $(e.target).toggleClass('owl-nonav', e.item.count <= e.page.size);
// });
owl_instance.owlCarousel({
themeClass: owl_owlthemes,
autoplay: owl_owlautoplay,
autoplayTimeout: owl_owltimeout,
items: owl_owlitemshow,
margin: owl_owlmargin,
responsive:{
0:{items:1,nav:true},
389:{items:owl_owlitemshow25},
605:{items:owl_owlitemshow50},
1023:{items:owl_owlitemshow75},
1289:{items:owl_owlitemshow}
},
loop: true_false,
nav: true_false,
slideBy: owl_slidebyf,
lazyLoad: owl_owllazy, // IMG markup (lazyOwl = V1 / owl-lazy = v2 ): class="owl-lazy" and data-src="url_to_img" src="" or/and data-src-retina="url_to_highres_img"
dots: owl_owldots,
//
// backport the classes to older used ones
navContainerClass: 'owl-buttons',
dotsClass: 'owl-pagination',
dotClass: 'owl-page',
autoplayHoverPause:true, //false
onInitialized: function() {
if(owl_slidebyf == 'page'){
owl_instance.owlCarousel({slideBy:page})
}
}
});
});
});
Fiddle example:
See JS Fiddle
UPDATE:
I got some way along with getting mutliple instances on page to fire and work (-ish as lazyload isnt happy) ..
In the fiddle, remove or comment out the following:
responsive:{
0:{items:1,nav:true},
389:{items:owl_owlitemshow25},
605:{items:owl_owlitemshow50},
1023:{items:owl_owlitemshow75},
1289:{items:owl_owlitemshow}
},
Ooops ... and this also needs commenting out or removing THEN it works? WTH?!
onInitialized: function() {
if(owl_slidebyf == 'page'){
owl_instance.owlCarousel({slideBy:page})
}
}
UPDATE 2:
Removing the "nav:true" in responsive seemed to fix .... seems to be the culprit for others reading ... if removed the original script code should work for you :)

Simply add some arrows (div, span, whatever) near the each carousel and assign to them class .carousel-arrow-left and .carousel-arrow-right. Next add this javascript to your js file.
The Javascript
// carousel arrows
$('.carousel-arrow-left').click(function(){
$(this).next(".carousel-product-list").trigger('prev.owl.carousel');
});
$('.carousel-arrow-right').click(function(){
$(this).prev(".carousel-product-list").trigger('next.owl.carousel');
});
Let's say every carousel is called .carousel-product-list. Now every right arrow on your page after click finds next class which name is .carousel-product-list and do a command next.owl.carousel, which means the carousel go forward by a one item.

Looping through generated HTML with jQuery

I know if I wanted to bind events to generated HTML, I'd need to use something like .on(), but I've only used it when binding events like .click().
I'm creating a web app that applys a list of colors. Colors are generated from a JSON file. Once fetched, I add it to the page, with certain information contained in attributes. I'd like to do something with the new generated HTML, which is list-elements. But what console.log() is showing me is there is nothing in the parent ul. Even though on the page I see the newly added content.
Here's the entire code based around it.
var setColors = function(){
getColors = function(){
$.getJSON('js/colors.json', function(colors) {
$.each(colors, function(i, colors) {
//console.log(colors);
$('<li>', {
text: colors['color'],
'name' : colors['color'],
'data-hex' : colors['hex'],
'data-var' : colors['var']
}).appendTo('#picker');
})
});
addColors();
}
addColors = function(){
var el = $('#picker').children;
$(el).each(function(){
console.log($(this));
});
}
return getColors();
}
$(function(){
setColors();
});
addColors() is where I'm having trouble with. The error says 'Uncaught TypeError: Cannot read property 'firstChild' of null. How can I work with the newly generated HTML?

You are missing parentheses on the children method:
var el = $('#picker').children();
Also, if you want the addColor method to be executed on the newly generated html, then you must add a call to it after the html is generated, from within the getJSON callback method.

addColors = function(){
var el = $('#picker').children;
$(el).each(function(){
console.log($(this));
});
}
A few issues:
missing end semi-color
missing parentheses on .children()
children() returns a jQuery object, no need for $(el)
Updated:
window.addColors = function(){
var $el = $('#picker').children();
$el.each(function(){
// do stuff here, but could attach each() to above, after children()
});
};

How to create simple jQuery plugin?

This test plugin, is supposed to work like this: When an element is clicked, it moves down. Simple as that.
jQuery.fn.moveDown = function(howMuch){
$(this).css("border", "1px solid black");
$(this).click(function(){
$(this).css("position", "relative");
$(this).animate({top: '+='+howMuch});
});
}
The problem is, when an element is clicked, it not only moves the clicked element but also ALL the other elements which the plugin was applied to.
What is the solution for this?

For plugin authoring try this way, much more solid:
Edit:
Here is working jsFiddle example.
PLUGIN:
(function($){
$.fn.extend({
YourPluginName: function(options) {
var defaults = {
howMuch:'600',
animation: '',//users can set/change these values
speed: 444,
etc: ''
}
};
options = $.extend(defaults, options);
return this.each(function() {
var $this = $(this);
var button = $('a', $this);// this represents all the 'a' selectors;
// inside user's plugin definition.
button.click(function() {
$this.animate({'top':options.howMuch});//calls options howMuch value
});
});
})(jQuery);
USER'S DOCUMENT:
$(function() {
$('#plugin').YourPluginName({
howMuch:'1000' //you can give chance users to set their options for plugins
});
});
<div id="plugin">
<a>1</a>
<a>2</a>
<a>3</a>
</div>

Here i want to suggest steps to create simple plugin with arguments.
JS
(function($) {
$.fn.myFirstPlugin = function( options ) {
// Default params
var params = $.extend({
text : 'Default Title',
fontsize : 10,
}, options);
return $(this).text(params.text);
}
}(jQuery));
Here, we have added default object called params and set default values of options using extend function. Hence, If we pass blank argument then it will set default values instead otherwise it will set.
HTML
$('.cls-title').myFirstPlugin({ text : 'Argument Title' });
Read more: How to Create JQuery plugin
Original answer Here i want to suggest steps to create simple plugin with arguments

If you have Node.js installed you can use create-jquery-plugin CLI utility. Just run
npx create-jquery-plugin
Or, you can clone the jquery-plugin-boilerplate
to get started.

Access javascript object directly through DOM traversing with jQuery

I'm working on a simple client side interface where I have a jQuery object that I want to access directly when clicking on a hyperlink. Simplified code:
<div class="controls">
<div class="score">
<a class="button" href="/add">Add points!</a>
</div>
</div>
$(".controls").myControls();
$.fn.myControls = function() {
return $.extend(this, $.myControls).initialize();
}
$.myControls = {
initialize: function() {
this.scoreElement = $("div.score", this);
this.linkElement = $("a", this.scoreElement);
this.scoreElement.score = 0;
var _this = this;
this.linkElement.click(function() {
_this.clickHandler(this);
});
},
clickHandler: function(element) {
var scoreElement = $(element).parent();
scoreElement.score = 1;
}
}
Explanation: .controls element has .score element which doubles as a container for score information (this.scoreElement.score). When I click on a link within the .score element, I find the parent element, which is the same element in the DOM as this.scoreElement and try to set its score property to 1. Obviously, this won't work, as the local scoreElement.score property in the clickHandler method is "undefined".
So here's my question: is there a simple way to access my this.scoreElement object directly through traversing the DOM with jQuery?
Surely I can check if this.scoreElement == $(element).parent() in some way and then access the right property in my this.scoreElement object, but direct access would be more elegant and robust. Is this possible? Am I going at it the wrong way? Thanks!
PS: Ignore the fact I use parent() to find the scoreElement, I only use it to illustrate my problem. Unless it is part of the problem, in that case don't ignore :)

While it's certainly possible to use your own 'control-object' to store the related data, I usually prefer to rely on jQuery doing it - with .data() method, like this:
$(this.scoreElement).data('score', 0); // in initialize()
$(this).parent().data('score', 1); // in clickHandler()
This approach allows me to scale more easily, as I never have to fear 'overlapping' issues, using a single 'control' object rather than object-for-element.

I would think that if you used jQuery's proxy function for your click handler, you then could just go this.scoreElement inside of clickHandler and you wouldn't even need to traverse the DOM. Like this:
$.myControls = {
initialize: function() {
this.scoreElement = $("div.score", this);
this.linkElement = $("a", this.scoreElement);
this.scoreElement.score = 0;
this.linkElement.click($.proxy(this.clickHandler, this));
},
clickHandler: function(event) {
var element = event.target;
this.scoreElement.score = 1;
}
}

After progressive simplification (and storing the score slightly differently) I get the code below, in which scoreElement is discovered once per .controls div, then held in a closure to make it available to its corresponding click handler. You could alternatively use .closest() - see commented out line.
$.fn.myControls = function() {
return this.each(function() {
var scoreElement = $("div.score", $(this));
scoreElement.data('score', 0);
$("a", scoreElement).on('click', function() {
scoreElement.data('score', 1);//get scoreElement from closure formed by the outer "each" function.
//$(this).closest(".score").data('score', 1);//alternative to the line above, not requiring closure.
});
});
};
Call as in the question with:
$(".controls").myControls();
This is so trivial and unidimensional it doesn't really warrant, in its own right, a jQuery plugin. Unless there was some compelling reason for a plugin (eg. reuse or the need for closely related methods), then I would phrase it as follows :
$(".controls").each(function() {
var scoreElement = $("div.score", $(this));
scoreElement.data('score', 0);
$("a", scoreElement).on('click', function() {
scoreElement.data('score', 1);//get scoreElement from closure formed by the outer "each" function.
//$(this).closest(".score").data('score', 1);//alternative to line above, not requiring closure.
});
});
That's the same code with the plugin wrapper removed and attached directly to the same base jQuery object.
And if you really wanted, you could write the whole thing in three lines as follows:
$(".controls").find("div.score").data('score', 0).find("a.button").on('click', function() {
$(this).closest(".score").data('score', 1);
});