Develop Reference

Can't get dynamically created modal to close on click | opens with .parents()

I have a module that was built using a Handlebars.js template, I orignally had it opening and closing perfectly, but the information wasn't updated, this can be seen here.
Now I have it so it updates the info, but the toggleClass won't fire when clicking either the 'x' or .overlay. This can be seen here.
Here is my jQuery functions to activate the modal.
$(document).on('click', "a.btn", function (e) {
$(e.target).parents('.image-container').prev('.modal').toggleClass('modal--show');
});
$(document).on('click', '.overlay', function (e) {
$(e.target).prev('.modal').toggleClass('modal--show');
});
$(document).on('click', '.modal__close', function () {
$('.modal').toggleClass('modal--show');
});
How can I make it so this modal will both Open and Close, as well as display the correct information?
Some things I've tried...
replacing: $(e.target) with $(this)

The problem with your code is that you are trying to toggle class of all .modal divs. But you need to toggle the class of only .modal.modal--show.
Also in case of overlay, you need to find the parent div not the sibling div. So use .closest() in place of .prev()
So if you modify your code as
$(document).on('click', '.overlay', function (e) {
$(e.target).closest('.modal.modal--show').toggleClass('modal--show');
});
$(document).on('click', '.modal__close', function () {
$('.modal.modal--show').toggleClass('modal--show');
});

Toggling one thing with two different elements

In my previous question I asked about how can I toggle a textarea with a paragraph. I got the answer. Now I want to do the opposite of it. First I was showing the already hidden textarea + 2 buttons by a click of a hyperlink. Now on the click of one of the buttons I want to hide the text + 2 buttons and show the paragraph that was first already shown.
I have tried this JS so far but it's not working:
$(document).ready(function () {
$(".no_link").click(function (e) {
e.preventDefault();
});
$(".edit_offer").on('click', function () {
toggleEditPanel($(this));
});
$("#cancel_edits").on('click', function () {
$(this).closest("button").hide();
$(this).closest("textarea").hide();
$(this).closest("p.content").show();
});
});
function toggleEditPanel(link) {
link.parent().parent().parent().find("textarea").toggle();
link.parent().parent().parent().find("button").toggle();
link.parent().parent().parent().find("p.content").toggle();
}
But its not working. How can I solve this error?
If I am trying to call the function toggleEditPanel() again. Its not working then aswell.
You can find the markup in the fiddle. Here's the fiddle.
UPDATE 1:
Just came up with a solution. I can use the $.siblings() function to toggle the elements beside the button. Still, is there any better solution?
Here's the code that I came up with:
$("#cancel_edits").on('click', function () {
$(this).hide();
$(this).siblings("button").hide();
$(this).siblings("textarea").hide();
$(this).siblings("p.content").show();
});
UPDATE 2:
The problem in the above code is that if there are more than one panels like this then the code is not working. How can I solve that issue aswell?

You are using Id for selector $("#cancel_edits") .
Id selectors returns only first element , so if there are multiple pannel it will work only for first.
Instead give some class name and use it for selector. Further you can use chaining and caching in your code for better performance.
$(".cancel_edits").on('click', function () {
var elm=$(this);
elm.add(elm.siblings("button,textarea")).hide();
elm.siblings("p.content").show();
});

I would recommend referencing your elements by ID:
$("#cancel_edits").on('click', function () {
$('#save_edits').hide();
$('#edited_content').hide();
$(this).hide();
$("p.content").show();
});
JSFiddle
The great thing about using IDs is that you are guaranteed they are unique - no need to use closest() to find the element you want. If, however, you're using classes instead, closest() might be necessary or helpful.

livejquery is not working

I am using livequery for applying jquery chosen plugin (for adding tags) on dynamically added elements. I tried :
$(".chz").livequery(function () {
$(this).chosen();
});
Through above code, choose plugin is not applying. But if i tried this :
$(".chz").livequery('click', function () {
$(this).chosen();
});
Than it works properly. But in my case i can`t use click event because until user click over the element the plugin is not applied. What i am doing working in first case ?

try something like this
$("body").on('click', '.chz'function () {
$(this).chosen();
});

when we use chosen plugin then we set class like this
class ="chzn-select"
then
$(function() {
$("chzn-select").chosen();
});
i think this will help you

Mouseenter/mouseleave multiple divs

I have three divs in a line going down a page with classes e.g. .class1, .class2, .class3.
when a users mouse enters either of the divs i want to show other divs (divA & divB), question is can i have multiple divs in the function?
this is what I have so far, for one div which works great:
$(document).ready(function(){
$("body").on("mouseenter", ".class1", function ()
{
$(this).children(".divA").slideDown();
$(this).children(".divB").slideDown();
});
$("body").on("mouseleave", ".class1", function ()
{
$(this).children(".divA").slideUp();
$(this).children(".divB").slideUp();
});
});
I want the effect to happen though if a use enters either .class1, .class2 or .class3
Without a similar function three times
I've tried .class1 && .class2 etc but no joy, also .class1 || .class2 etc but also no joy
Is this possible?

In jQuery you can separate selectors with , so in your case something like ".class1, .class2" and so forth.
jQuery will then look for elements that match one or multiple of those selectors.
Update:
You can shorten the code a bit by binding both the events to the same callback, and use slideToggle() instead:
$(function() {
$("body").on("mouseenter mouseleave", ".class1, .class2, .class3", function ()
{
$(this).children(".divA, .divB").slideToggle();
});
});
Haven't tried it, but this should be equivalent to your code in terms of functionality. Just a bit shorter.

You can simply do
$(document).ready(function(){
$("body").on("mouseenter", ".class1, .class2, .class3", function ()
{
$(this).children(".divA").slideDown();
$(this).children(".divB").slideDown();
});
$("body").on("mouseleave", ".class1, .class2, .class3", function ()
{
$(this).children(".divA").slideUp();
$(this).children(".divB").slideUp();
});
});

JQuery drop down bobs up and down continuously

I am using jquery to hide/show an DIV on hover of an LI. When I do this the div appeared but pops up and down without stopping until I take my mouse off the LI.
$(document).ready(function () {
$('li.menu_head').mouseover(function () {
$('div.newsadviceDrop').slideToggle('medium');
});
});

Try:
$(document).ready(function () {
$('li.menu_head').hover(function () {
$('div.newsadviceDrop').slideToggle('medium');
});
});
EDIT: To keep it open until you mouse over again do this
$(document).ready(function () {
$('li.menu_head').mouseenter(function () {
$('div.newsadviceDrop').slideToggle('medium');
});
});

Try to use .mouseenter instead of .mouseover

While the mouse is over li.menu_head, you will repeatedly call .slideToggle, which explains why you see the continuous behaviour. You could perhaps replace this with behaviour on mouseenter and mouseexit.

There is an issue like that with "mouseover".
Try "mouseenter" instead...
OR...
just use the jQuery hover()
EDIT:
silent1mezzo submitted the best/correct answer first.