i am making a website for mobile devices, in which i have a list of name and i need to bind click event to the list. i done this using jquery. in all webdevices (android, blackberry, nokia) when i click the list the result will come but nly in iphone the event is not triggering. how can i solve it.
<ol id="movie-list">
<li> Movie 1 </li>
<li> Movie 2 </li>
<li> Movie 3 </li>
</ol>
$('#movie-list li").live("click", function() {
console.log($(this).html());
});
http://bugs.jquery.com/ticket/5677 - Live Click Events Don't Register On MobileSafari (iPhone)
Apparently that's a jQuery bug. "The workaround is to add onclick="" to the element you are attaching to...."
On a different note though, .live() has been deprecated.
The link provides information on porting to newer methods. If using jQuery 1.7+:
$(document).on("click", "#movie-list li", function() {
console.log($(this).html());
});
Use jquery .on instead of .live
There is typo in your code '#movie-list li" should be "#movie-list li"
$(document).on("click", "#movie-list li", function() {
alert($(this).html());
});
EDIT:
Exact duplicate - How do I use jQuery for click event in iPhone web application
Related
I am modifying an existing navigation system for the iphone which does not support the hover class. The menu should work on both a desktop computer and on iphone.
When I click on a menu item it shows and hides correctly. It also shows and hides on hover. Great. The problem is that when a user clicks on a link on the iphone and navigates to a different page, when the user comes back to the original page the menu is still open. It remains that way until the user dutifully clicks the menu again to hide it whichisi not acceptable.
Can anyone help on this? I have been at this a full day checking Stackoverflow with no results. My wife wants a divorce and my girl friend is unhappy too.
Here's the operative part of the css.
<div class="top_nav">
<ul id="nav" class="dropdown">
<li <span class="dir">Desserts</span>
<ul>
<li>Pie</li>
<li>Ice Cream</li>
<li>Toppings
<ul>
<li>Chocolate Sauce</li>
<li>Nuts</li>
<li>Whipped Cream</li>
</ul>
</li>
</ul>
</li>
<li>Dessert Wines</li>
<li>Brandy</li>
</ul>
</div>
$(document).ready(function(){
$('.top_nav').children("ul").children("li").click(function(e) { //this works with click
if($(e.target).closest("li").get(0) !== this) { return; }//anti-bubbling measure (try without this line and see the effect)
$(this).find("ul").stop(true, true).toggle();
});
$('.top_nav').children("ul").children("li").children("ul").children("li").click(function(e){
if($(e.target).closest("li").get(0) !== this) { return; }//anti-bubbling measure (try without this line and see the effect)
$(this).find("ul").stop(true, true).toggle();
});
});
Hello this may be a little clean and green.
The current stack I am using is:
phonegap cordova
jquery mobile
and I am making a TODO app for IOS
the app works fine,
<ul id="todo_list" data-role="listview" data-autodividers="false" data-filter="true" data-theme="d">
<li id="'+i+'"><span style="white-space:normal;">'+todo+'</span></li>
</ul>
however what I would like to implement is edit on click, like jeditable. when the user click on the
<li>
element instead of popping a textbox.
I have the code below to show a button in a overlay.
<div class="overlay22" id="overlay22" style="display:none;"></div>
<div class="box22" id="box22">
<input type="submit" value="Submit" class="buttonclick" id="buttonclick" />
</div>
Can we show the cq5 form in the overlay instead of hardcoding in the overlay?
If you are just creating some sort of basic form template or component, I think you should just stick to using regular HTML elements and then control look + feel with CSS. Though if you absolutely needed to use form elements similar to what you see in CQ's dialog windows, you will need to generate them by working with CQ's extension of the Ext JS framework.
For example, if you wanted to create a button analogous to your provided example, you'd have to write something like:
CQ.Ext.onReady( function(){
var button = new CQ.Ext.Button({
text : "Submit",
id : "buttonclick",
cls : "buttonclick",
renderTo : CQ.Ext.getBody(),
listerners : {
click : function(){
// Write handler code here
}
}
});
});
Widget API for latest version of CQ (5.5):
http://dev.day.com/docs/en/cq/current/widgets-api/index.html
Materials on Sencha Ext JS 3.4 (which I believe 5.5 is built on):
http://docs.sencha.com/ext-js/3-4/
We can do in the following way as well,
Say for instance we have a page with default cq5 form component already dragged in that,
Let that page be defined in this path as /content/geometrix/loginpage.html
Now we can show the above page in an overlay, using the below code
<div class="overlay22" id="overlay22" style="display:none;"></div>
<div class="box22" id="box22">
<sling:include path="content/geometrix/loginpage/par" />
</div>
Below that par we can find the contents of the form.Here box22 is the lightbox(pop up) and the overlay22 is the background div
I am using phoneGap and jQuery Mobile. When I use a <div></div> tag then it works properly but on an iPhone it is auto scroll-able. How do I stop this?
if you want to prevent a div to scroll use this:
<div id="container" ontouchmove="touchMove(event);">
content goes here
</div>
and the function touchMove(event):
touchMove = function(event) {
event.preventDefault();
}
hope this works
With following code I can not click on labels in jqtouch (on iphone simulator and iphone itself):
<ul class="rounded">
<li>
<label for="user_name">Name</label>
<input type="text" name="user_name" id="user_name"/>
</li>
</ul>
It is working well in safari, I have checked this also in demo of jquery-mobile and it is working on iphone simulator, so problem seams to be strictly jqtouch specific.
There is an obscure trick for this, using CSS:
label { cursor: pointer; }
And it will work on iPhone and iPad.
add onclick="" to the label
<label for="blah" onclick="">blah</label>
Tapping on <label> does not auto-focus linked in Mobile Safari
thanks to #Ivan I found better solution:
$('label[for],input[type="radio"]').bind('click', function(e) {
e.stopPropagation();
});
Additionally it fixes radio buttons.
The only downside is - it stops propagation, but in my case it is ok.
yeah, the user693942 CSS trick is enough, actually, it works!
label { cursor: pointer; }