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());
});
})
Related
It's a real mystery, but somehow I cannot detect checkbox click or change with the following code:
jQuery(document).ready(function () {
jQuery(document).on("click", "#item_configuration_item_selected", function() {
console.log("click");
});
});
It works with any other element, but not checkboxes.
When I try to detect the clicked element with this:
jQuery('body').click(function(event){
var id = event.target;
console.log(id);
});
then again, it shows a clicked element id for any other element, except checkbox. I'm just going crazy figuring this out.
Element html looks like this:
<div class="span3">
<label for="item_configuration_item_selected" class="checkbox">
<input type="checkbox" class="fabrikinput " name="item_configuration_item_selected[0][0]" id="item_configuration_item_selected" value="1"><span>MyLabel</span></label>
</div>
Any hint would be highly appreciated.
Edit added snippet
jQuery(document).ready(function() {
jQuery(document).on("click", "#item_configuration_item_selected", function() {
console.log("click");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="span3">
<label for="item_configuration_item_selected" class="checkbox">
<input type="checkbox" class="fabrikinput " name="item_configuration_item_selected[0][0]" id="item_configuration_item_selected" value="1"><span>MyLabel</span></label>
</div>
Thank you all, but Prakash's suggestion "$("#item_configuration_item_selected").change(function() {})" was the only thing that worked. Thank you so much! I'm still confused why, but as long as it does the trick, I can live with that :)
I'm trying understand how element focus works.
My questions is:-
Does Javascript focus have some limitations? I mean does it have same permissions when it runs from website code and from debug console?
also does focus depends on user action? Because I have code example which I can't understand why it runs like this:-
$('document').ready(function() {
$('#username').focus();
$("#username").focus(function() {
$('.placeholder').hide();
});
$('#ss').click(function() {
$('#username').focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="placeholder_input">
<input type="text" id="username" maxlength="100" />
<div class="placeholder_container">
<div class="placeholder">username</div>
<div id='ss'> damc</div>
</div>
</div>
Example On JSFiddle
When code starts run it must focus input field and hide text but it not doing this can't understand why? But when I'm making click on text then it makes focus on input field and hides text. Why it can't hide in beginning? Is it some kind of limitation?
You are focusing the element before you bind the event listener. Change the order and it works as planned:
$('document').ready(function() {
$("#username").focus(function() {
$('.placeholder').hide();
});
$('#ss').click(function() {
$('#username').focus();
});
$('#username').focus(); // focus here after your events are bound
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="placeholder_input">
<input type="text" id="username" maxlength="100" />
<div class="placeholder_container">
<div class="placeholder">username</div>
<div id='ss'> damc</div>
</div>
</div>
I have a click event that only works when I have my iPad in landscape but when I turn it to portrait, it stops working. Can anyone tell me why?
<div id="home_page">
<div class="full">
<button class="button" id="func_checks">Functional Checks</button>
</div>
</div>
$(document).ready(function(){
$("#func_checks").on("click touchstart", function(){
$("#header").append("<h1>G-IV Functional Checks</h1>");
$("#home_page").hide();
$(".return").show();
$("#checks_page").show();
})
})
Modify click handler to:
$("#func_checks").on("click touchstart", function(){
$("#header").append("<h1>G-IV Functional Checks</h1>");
$("#home_page").hide();
$(".return").show();
$("#checks_page").show();
});
I have a simple application, where I'd like to toggle between showing and hiding elements in a fieldset using jQuery's .toggle effect. The trouble is, occasionally I have to double-click the button that enables the toggle, to get it to work.
Any ideas on what's going on?
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.1.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<div class="LeftFrame">
<div id="LeftTable"><strong>Left</div>
</div>
<div id="MainTable"><strong>Main
<div>
<br>
<form><fieldset><legend><button id="buttonShowFields">Add Info</button></legend>
<div id="InfoAddFields">
ID: <input type="text"><br>
Serial Number: <input type="text"><br>
Location: <select id="inputLocation">
<option>Location1</option>
<option>Location2</option></select><br>
Status: <select id="inputStatus">
<option>Complete</option>
<option>In Process</option></select><br>
</div>
</fieldset></form>
</div>
</div>
</body>
</html>
... and javascript (test.js ref in html above):
$(document).ready(function(){
// Show options to add workorder
// $("#WOAddFields").hide();
$("#buttonShowFields").click(function(){
$("#InfoAddFields").toggle();
});
});
Prevent the submit with event.preventDefault() when you click the button
http://jsfiddle.net/3NPPP/
$(document).ready(function(){
$("#buttonShowFields").click(function(e){
e.preventDefault();
$("#InfoAddFields").toggle();
});
});
I was having the same problem when using plain javaScript to toggle an element with the following function:
function toggle(element){
if (element.style.display !== "none")
element.style.display = "none";
else element.style.display = "block";
}
I noticed that when I added display:none to the CSS of the element I wanted to toggle, I needed to double click to first show the element. To fix this, I had to explicitly add style="display:none" to the HTML element tag.
instead of this...
<button id="buttonShowFields">Add Info</button>
use this...
<input type="button" id="buttonShowFields" value="Add Info" />
Please change event method to bind instead click.
$("#buttonShowFields").bind('click',function(){
$("#InfoAddFields").toggle();
});
i have been trying to resize two windows simultaneously but for some reason it doesnt work.
i tried to catch errors but nothing.
Note: i dont want to use jquery resize since it doesnt have a fast inteval for checking resizes
JAVASCRIPT:
function _u(e){
try {
e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directy with prev('.first')
} catch(err){alert(err);}
}
$(document).ready(function(){
$(".data").each(function(){
var resizerint;
$(this).mousedown(function(){
try {
var eee = $(this);
var resizerint = setInterval(function(){
try {
_u( eee );
} catch(err){alert(err);}
},10); // i need it 10ms
} catch(err){alert(err);}
$('.test').html('<font style="position:absolute;top:0;right:0;color:red;"> mouse DOWN </font>');
}).mouseup(function(){
try{
clearInterval(resizerint);
} catch(err){alert(err);}
$('.test').html('<font style="position:absolute;top:0;right:0;color:green;"> mouse UP </font>');
});
});
});
and HTML:
<div class="boss">
<div class="first">
<table>
<tr>
<td>
<div class="title">ONEEEEE</div>
</td>
</tr>
</table>
</div>
<div class="second">
<textarea class="data" > ONEEE TEXTY TESTY NJAMMM! </textarea>
</div>
</div>
<div class="boss">
<div class="first">
<table>
<tr>
<td>
<div class="title">TWOOOOOO</div>
</td>
</tr>
</table>
</div>
<div class="second">
<textarea class="data" > TWOOO TEXTY TESTY NJAMMM! </textarea>
</div>
</div>
<div class="text"></div>
Thank you in advance for any help you can provide.
JSFIDDLE (IF YOU SEE , THE BLUE DOESNT RESIZE WHEN MOUSEDOWN at the TEXTAREA )
http://jsfiddle.net/2sfFW/
My first answer was that there was a missing "$" but it didn't fix the problem.
Got it working to some extent, but you have to click into the text field first before it will initialize. I used your blue version as a visualizer.
The proper jquery traversal is
e.parent().parent('.boss').find('.first')
or
e.parents('.boss').find('.first')
You have to use the plural version because there are two parent divs above it. Using parent().parent() is more specific but probably not necessary in this case.
http://jsfiddle.net/aQKVD/1/
If you remove the mouseup/mousedown handlers it will initialize at document.ready instead, which I think might be what you want. You don't necessarily need to do the clearing of the variable unless you have some other need for it, since .each() creates a separate instance of the function tied to the specific div in question. Here's a version like that:
http://jsfiddle.net/aQKVD/2/
Doesn't fix it in JSfiddle, but for starters you've left off a "$". I've set up a JSfiddle link so other people can try it. http://jsfiddle.net/aQKVD/
function _u(e){
try {
e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directly with prev('.first')
} catch(err){alert(err);}
}
$(document).ready(function(){
(".data").each(function(){
last line should be
$(".data").each(function(){