We Keep Coding

jQuery "on click" don't work on ios/safari

I know there's bunch of link here for my problem but none of them can solve my problem. I have code like this
$('[name=pie]').on('click change touchstart tap', function() {
$('#summary_pie').html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-item">
<input type="radio" name="pie" id="pie-wheat" value="Tortilla pszenna">
<label for="pie-wheat" onclick=""><img src="img/pie-wheat.png"></label>
<p class="description">Tortilla pszenna</p>
</div>
<p>Tortilla: <span id="summary_pie"></span></p>
and it works on chrome etc. but don't work on ios. I tried:
- adding cursor: pointer
- adding empty onclick
- adding touchend event
but nothing work. In my php I have only 2 css (reset.css and my own). Deleting them don't work. Please help me.

I have just modified click event calling code and also tested the same on ios device.so it may solve your issue.try this
$(document).on('click change touchstart tap','[name=pie]', function() {
$('#summary_pie').html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-item">
<input type="radio" name="pie" id="pie-wheat" value="Tortilla pszenna">
<label for="pie-wheat" onclick=""><img src="img/pie-wheat.png"></label>
<p class="description">Tortilla pszenna</p>
</div>
<p>Tortilla: <span id="summary_pie"></span></p>

try
$(document).ready(function(){
$('[name=pie]').on('click change touchstart tap', function() {
$('#summary_pie').html($(this).val());
});
})

On Checkbox click show hide div having same class dynamically

I want click on the check box and hide the respective content.
Now in my code all the content with same class gets hidden when I click any one of the checkbox.
Since my front end tags are in apex I do not want to use id, attr, name,value. I want to use class and fix this issue, exactly in the way I have written in this fiddle.
Fiddle link for reference
$('input[type="checkbox"]').click(function() {
if ($(this).is(":checked")) {
$('.div1').hide();
} else {
$('.div1').show();
}
});
<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<form>
<input type="checkbox">Exam1
<div class="div1">I am content1!
</div>
<br>
<input type="checkbox">Exam2
<div class="div1">I am content2!
</div>
<br>
<input type="checkbox">Exam3
<div class="div1">I am content3!
</div>
<br>
<input type="checkbox">Exam4
<div class="div1">I am content4!
</div>
<br>
</form>
https://jsfiddle.net/6ybp2tL6/
Is this possible??
Thanks in advance

Try this instead DEMO
$('input[type="checkbox"]').click(function() {
($(this).is(":checked")) ? $(this).next().hide() : $(this).next().show();
});

Try to hide all the divs with class div1 initially,
$(".div1").hide();
$('input[type="checkbox"]').click(function() {
$(this).next('.div1').toggle(!this.checked); //toggle(false) will hide the element
});
And toggle the visibility of the relevant div element with class div1 by using next() and toggle()
DEMO

Javascript/jQuery watch for CSS Changes

I have a simple dropdown that opens up a search field when you click it. Even though I have the text field of this search set to autofocus, it's not working for all browsers.
What method of Javascript/jQuery would I use to check if the containing UL css display is set to block, so that I can force the focus to be on the field using .focus().
HTML:
Quick Search
<ul class="dropdown-menu" role="menu">
<li id="li-quicksearch">
<form id="mainSearch" class="form-search">
<p>
<input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
<button type="submit">SUBMIT</button>
</p>
</form>
</li>
</ul>

EDIT: There is no css change event so you'll have to approach the problem in 1 of 2 ways.
check the dom element in set intervals to see if its css has changed
trigger an event when the css of the dom element is changed by user interaction/your code.
the first way will look something like this:
var element = $(".dropdown-menu");
function checkForChanges()
{
if (element.css('display') == 'block')
{
// do your .focus() stuff here
}
setTimeout(checkForChanges, 500); // does this every half second.
}
or the second way:
$('.toggle').on('click', function() {
$('.dropdown-menu').toggle();
$('.dropdown-menu').trigger('change');
});
$('.dropdown-menu').on('change', function(){
if($(this).css(.css('display') == 'block')
{
// do your .focus() stuff here
}
});

You can check the display value of the ul using pure JavaScript with this:
JS:
var display = document.getElementById('dropdown-menu')[0].style.display;
if (display === 'block') {
//do what you want.
}
Or using jQuery:
if ($('.dropdown-menu').css('display') === 'block') {
//do what you want.
}

It looks like you are using bootstrap to create the dropdown. If that is the case you can use the "shown" event. However you need to attach the event on a container element.
Html
<div class="quickSearchContainer">
Quick Search
<ul class="dropdown-menu" role="menu">
<li id="li-quicksearch">
<form id="mainSearch" class="form-search">
<p>
<input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
<button type="submit">SUBMIT</button>
</p>
</form>
</li>
</ul>
</div>
Javascript
$('#quickSearchContainer').on('show.bs.dropdown', function () {
$('#inputSearch').focus();
});

I want to thank everyone for their input, but the working solution that I found was to modify the bootstrap JS to allow for an autofocus on toggleClass of the OPEN for the dropdowns. Everyone gets kudos!

How to get class of item selected in jquery?

I have 2 images (.field-img) , wrapped in a container (.group-container),
each of the images are in a unique field id, so my tpl is broken down into
<div class=group-container>
<div id=field1>
<div class=field-img>
</div></div>
<div id=field2>
<div class=field-img>
</div></div>
</div>
my js is
$(".group-container .field-img").click(function() {
alert(".group-container .field-img");
what I would like is to detect automatically if the image belongs to field1 or field2.
So I could alert (".group-container .field1/2 .field-img");
How would I do this?
Thanks for any help

$(".group-container .field-img").click(function() {
var field=$(this).parent().attr('id');
});

An alternative to Izzey's solution is to use .closest with an attribute starts with selector (or classname because it would be more appropriate for those divs to have a common class)
$(".group-container .field-img").click(function() {
var field = $(this).closest("[id^=field]")[0].id;
});
or, with a common classname,
html
<div class=group-container>
<div class="field" id=field1>
<div class=field-img>
</div></div>
<div class="field" id=field2>
<div class=field-img>
</div></div>
</div>
js
$(".group-container .field-img").click(function() {
var field = $(this).closest(".field")[0].id;
});

$(".group-container .field-img").click(function() {
var field = this.parentNode.id;
alert (".group-container ." + field + " .field-img");
});

$(".group-container .field-img").each(function() {
$(this).click(function(){
var fieldid=$(this).parent().attr('id');
});
});

Since one element is inside the other, the click will propagate up anyway, so you could always just bind the click to the parent element and do :
$('div[id^="field"]').on('click', function() {
alert(".group-container "+this.id+" .field-img");
});
FIDDLE
or even get them all dynamically:
$('div[id^="field"]').on('click', function(e) {
alert('.'+this.parentNode.className+" "+this.id+" ."+e.target.className);
});
FIDDLE
​

Mootools Click Event Problem

This peace of code works for the first click. but then it seems to not be able to get new ID from next click. the idea behind it is to show one piece of a form and with click on a button it hides first and shows second part. any idea what im doing wrong?
i guess it has something to do with "this" but from my understanding it should get the id from the second link also.
window.addEvent('domready', function()
{
$('page_2').slide('hide');
$('page_3').slide('hide');
$('page_4').slide('hide');
$('page_5').slide('hide');
var togglePrefix = 'toggle_', boxPrefix = 'page_', emptyPrefix = '';
var links = $('submit_box').getElements('a');
links.addEvent('click', function(e)
{
e.stop();
var id = $(this.get('id').replace(togglePrefix,emptyPrefix));
var id_new = parseInt($(this).get('id').replace(togglePrefix, emptyPrefix)) + 1;
var next = ('page_'+id_new);
var id_old = $(this.get('id').replace(togglePrefix,boxPrefix));
$(id_old).set('slide', {duration: 'long', transition: 'linear'});
$(id_old).slide('out');
$(next).slide('in');
});
});
the html follows this pattern:
<div id="page_1">
<div id="inhalt-gewinn">
<div id="gewinn_bild"></div>
<div id="gewinn_form">
<form id="gewinnspiel" name="gewinnspiel" method="post" action="<?=$_SERVER[PHP_SELF]; ?>">
<div id="input_box">
<div><input type="radio" name="frage1" value="Kamille" /><span>Kamille</span></div>
<div><input type="radio" name="frage1" value="Kaktus" /><span>Kaktus</span></div>
<div><input type="radio" name="frage1" value="Krokus" /><span>Krokus</span></div>
</div>
<div id="submit_box"><a id="toggle_1" class="frage">nächste Frage...</a></div>
</div>
<div id="gewinn_werbung"></div>
</div>
</div>

If I understand the example, you've got a bunch of divs with id page_1, page_2 and so on. In every div is a div with the id "submit_box". When you wrote $('submit_box').getElements('a') it will add the event only to the first div cause an id has to be unique. You cant have more then one element with a unique id in the page. So to get your example work change the id to a classname and use $$('div.submit_box a').

The use of ID´s multiple times on the page ruined the code!
After fixing this it worked fine