We Keep Coding

I have an issue when trying to add class to image in jQuery

here is the code:
$(function()
{
$('.sign1').click(function(){
$(this).addClass('good');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-6 menu-item">
<div class="front">
<img class="center-block sign1" src="images/sign1.png">
</div>
</div>
</div>
</div>
</div>
It's supposed to add the class 'good' when clicking the image with class 'sign1'
but that never happens.
what's wrong with my code please?

you code works fine if you remove the link <a> surrounding the <img> element.
after jquery adds the good class to the image, the click even bubbles up to its parent <a> and this directs the browser to the new address: main.html.
so you won't have the time to see the change i suppose.

You can code like below
var targetImg = document.getElementsByTagName("img");
targetImg.classList.add("mystyle");

Swipe event propagation with nested div doesn't work

Hi I've the following html structure:
<div class="container">
<div class="scroller">
<div id ="goldenPage" class="page active">
<div class="block text">
<div class="rich-text"></div>
</div>
<div class="block">
<div class="form"></div>
</div>
<div class="block">
<ul class="menu"></ul>
</div>
</div>
<div id ="cachePage" class="page"></div>
</div>
</div>
If I bind a swipe event on div with class container using code
var myElement = $(".container")[0];
var hammertime = new Hammer(myElement);
hammertime.on("swiperight",function(){
console.debug(" manage swiperight event.");
});
and if I swipe nothing happen (except if I swipe on the bottom of my page because the internal div with scroller class is fewer height than parent div). If I bind the swipe on div with class scroller the swipe is correctly binded. The scroller div is binded with jquery scrollpane plugin.
Any ideas?!

DEMO — Make sure your JavaScript/jQuery is fired after the document.ready event.
If the JavaScript fires before the element is available in the DOM, your JavaScript will not find the element, and thus be unable to bind the (swiperight) event to the element.
Using jQuery, this can be achieved by wrapping your JavaScript code in:
$(function() {
// Your code here.
console.log("Ready!");
});

Hide previous div onclick

I have the following page structure (super simplified):
I can have X (dynamic) number of idle-variables.
<div class="idle-variable">
<div class="var-container">content</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content</div>
Save
</div>
My Problem:
When I click save within the second instance of "idle-variable", I want to hide the "var-container" of the previous DIV set. Again, there can be several idle-variable divs at any given time. Anytime the save button is clicked, it should close/hide the "var-container" of the previous div set.
I've tried:
$(".var-container").hide()
$(".var-container").prev().hide();
But they are not working. The first example closes/hides both and the second will close "idle-variable".
Any thoughts here?

Try to do this
$('a').on('click', function() {
$(this).prev().toggle();
});

If you want to hide the content div immediately before the save button when you click on it, use:
$('div.idle-variable a').click(function(){
$(this).prev().hide();
})
jsFiddle example

Consider the HTML:
<div class="idle-variable">
<div class="var-container">content 1</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content 2</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content 3</div>
Save
</div>
You can hide .var-container div before the link using the jQuery code:
$('a').click(function (e) {
$(this).prev('.var-container').hide();
});
You can test this here.

PrettyPhoto inline Content div hide show

I have a problem with PrettyPhoto
in inline content there is two div and one button.I want that when I clickedn button divisionImage will hide and divisionVideo will show. here is a codes inline content and div hide show function not working
<div id="inline-content" class="hide" style="text-align: center;">
<input id="btn1" type="button" name="btnCzmVideo" value="Çözüm Videosu"
onclick="VideoGoster()" />
<div id="divisionImage" style="text-align: center;">
<img id="imgCozumIcerigi" src="#" />
</div>
<div id="divisionVideo" style="display: none;">
</div>
</div>
function VideoGoster() {
$("#divisionImage").css('visibility', 'hidden');
$('#divVideo').show();
}

Problem Solved
actually divs hided and showed but u cant see
in prettyphoto modal when press right arrrow PrettyPhoto Content refreshed and your divs is hided and showed what you wanted.
send right arrow key or left arrow key to page programatically and problem was solved

select disappears with onmouseenter

I want create a menubar. when mouse is over a menu, a div appairs.
<li class="elementoMenu jmenu" tipomenu="jmcerca">
<div class="tleft"></div>
<div class="tabs">
<div class="inner">
FIND
</div>
</div>
<!-- DIV THATH WILL BE APPAIRS IS MOVED HERE-->
<div class="tright"></div>
</li>
The DIV that will be appears is moved where in place of comment via .appendTo jQuery function.
This is the div that appears:
<div id="jmcerca" class="jmenuOpen" style="width:600px;height:500px">
TITLE
<select class="jmenu noProp">
<option>1M</option>
<option>3M</option>
<option>5M</option>
</select>
FIND <input> </input>
<button>GO</button>
</div>
I have binded the event in this way:
$(document).ready(function(){
$('li.jmenu').mouseenter(jMenu.showMenu);
$('li.jmenu').mouseleave(jMenu.leaveTabs);
});
where showMenu and leaveTabs are function that show or hide the div.
It works fine, but when I click on select the option of select and disappears.
Any suggestions?
Thanks