Can you please help me to locate on which element "taphold" is fired by using JS, jQuery, or jQuery Mobile?
My HTML structure is like the below
<script>
$(document).on("pagecreate", function () {
$("#myFilesListView").bind('contextmenu', function (event) {
event.preventDefault();
event.stopPropagation();
return false;
});
});
$(document).ready(function () {
$("#myFilesListView").bind("taphold", function (event) {
event.preventDefault(false);
event.stopPropagation();
var ID = $(this).child().attr("id");
alert(ID);
});
});
</script>
<div data-role="page" id="page1">
<div data-role="header"></div>
<div data-role="main">
<ul data-role="listview" id="mylistview">
<li class="mydata" id="1"> some conetent</li>
<li class="mydata" id="2"> some conetent</li>
<li class="mydata" id="3"> some conetent</li>
<li class="mydata" id="4"> some conetent</li>
<li class="mydata" id="5"> some conetent</li>
<!--ids are not in predefined sequences and there may be 100s of list-->
</ul>
</div>
<div data-role="fotter"></div>
</div>
In my JavaScript code I am able to prevent the default behavior of taphold, but I am not getting how to get the Id of a particular list as soon as a user tap and hold on that list.
You can bind the taphold to the li elements instead of the listview:
$(document).on("pagecreate", "#page1", function () {
$("#mylistview").on('contextmenu', function (event) {
event.preventDefault();
event.stopPropagation();
return false;
});
$("#mylistview li").on("taphold", function (event) {
var ID = $(this).prop("id");
alert(ID);
});
});
DEMO
Related
I have jQuery custom accordion function and I would like to bind it to url that every hash tag given in url would open desired element.
I added var hash in function and tried to assign it to active variable but it did not work. Any ideas how to modify it?
jQuery.fn.extend({
accordion: function() {
return this.each(function() {
var $ul = jQuery(this);
if($ul.data('accordiated'))
return false;
jQuery.each($ul.find('ul, li>div'), function(){
jQuery(this).data('accordiated', true);
jQuery(this).hide();
});
jQuery.each($ul.find('a'), function(){
jQuery(this).click(function(e){
activate(this);
return void(0);
});
});
var hash = window.location.hash;
var active = jQuery('.accordion .active');
if(active){
activate(active, 'toggle');
jQuery(active).parents().show();
}
function activate(el,effect){
Query(el).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');
jQuery(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
}
});
}
});
jQuery('.accordion ul').accordion();
A here is html structure:
<div class="accordion">
<ul class="accordion">
<li class="active">
Health<span></span>
<ul>
<li>Implants<span></span>
<p>Content</p>
</li>
<li>Protetic<span></span>
<p>Content</p>
</li>
</ul>
</li>
<li>Link 2<span></span>
<p>Content</p>
</li>
</ul>
</div>
I making a single page website. When I open my menu and click on a li item, I want my menu to close.
For the moment it is working when I click back on the "menu-burger-wrapper" and I want to set the same thing when I click on items li.
There is my code:
$(document).ready(function() {
$('#menu-burger-wrapper').click(function(e) {
e.preventDefault();
$this = $(this);
if ($this.hasClass('is-opened')) {
$this.addClass('is-closed').removeClass('is-opened');
} else {
$this.removeClass('is-closed').addClass('is-opened');
}
})
});
<nav class="menu-base" id="menu-base">
<ul class="menu-item">
<a id="en-cours" class="work_menu link link--over">
<li>works</li>
</a>
<a class="about_menu link link--over">
<li>about</li>
</a>
<a class="link link--over">
<li>contact</li>
</a>
</ul>
</nav>
<!-- Header -->
<div id="header">
<!-- Menu -->
<div id="menu-burger-wrapper">
<div id="menu-burger">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
</div>
Try this - just attach the click handler to the li elements.
var clickHandler = function (e) {
e.preventDefault();
$this = $(this);
if ($this.hasClass('is-opened')) {
$this.addClass('is-closed').removeClass('is-opened');
} else {
$this.removeClass('is-closed').addClass('is-opened');
}
};
//attaching the event to both, together.
$('#menu-burger-wrapper, ul.menu-item li').on('click', clickHandler);
You can use toggleClass to toggle class.
You can use , to separate the elements on which you want to bind event.
$('#menu-burger-wrapper, .menu-item').on('click', function (e) {
e.preventDefault();
$(this).toggleClass('is-opened is-closed');
});
$('.menu-item').on('click', 'li', function() {
$('#menu-burger-wrapper').trigger('click');
});
Demo: https://jsfiddle.net/tusharj/7c5nd7rj/1/
I have this html:
<ul id="ul_places_list">
<li data-placesCode="6">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893365.jpg">
</div>
<label>Coming Out</label>
</a>
</li>
<li data-placesCode="8">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893594.jpg">
</div>
<label>Friends</label>
</a>
</li>
</ul>
and this javascript
$(document).delegate('a','click',function(){//used to switch page
console.log('delegate executed');
var a = $(this);
if(a.attr('href') != '#'){
event.preventDefault();
toPage(a.attr('href'));
}
});
$(document).ready(function(){
$('#ul_places_list li').click(function(){
var code = $(this).attr('data-placesCode');
console.log('code is: ' +code);
});
});
The problem is that when I click on list element only the delegated click on the element fires and not the event on the "li" element.
The "li" elements are added after an Ajax call.
What's going? What am I missing?
This )}; was the problem. Should be this });.
$(document).delegate('a','click',function(){//used to switch page
console.log('delegate executed');
var a = $(this);
if(a.attr('href') != '#'){
event.preventDefault();
toPage(a.attr('href'));
}
});
$(document).ready(function(){
$('#ul_places_list li').click(function(){
var code = $(this).attr('data-placesCode');
console.log('code is: ' +code);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul id="ul_places_list">
<li data-placesCode="6">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893365.jpg">
</div>
<label>Coming Out</label>
</a>
</li>
<li data-placesCode="8">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893594.jpg">
</div>
<label>Friends</label>
</a>
</li>
</ul>
The below answer actually is just a different implementation of your code.
The real answer is
This )}; was the problem. Should be this });.
From the other answer: https://stackoverflow.com/a/27571915/561731
But you really should be using .on in new code :-)
Old answer:
Try using .on
So you can do:
$(document).on('click', 'a', function () {
//event for anchor tag
});
$(function () {
$('#ul_places_list').on('click', 'li', function () {
//stuff for li click event
});
});
if you add the "li" elements in a AJAX call you should add the click event after the elements load. Add this when ajax call end:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addEventToControls)
function addEventToControls()
{
$('#ul_places_list li').click(function(){
var code = $(this).attr('data-placesCode');
console.log('code is: ' +code);
});
}
The add_endRequest Manager fire the handler when a Ajax Call end.
I am trying to make a simple function but doing something wrong. Clicking the href causes a page jump and the function fails. Fiddle: http://jsfiddle.net/XkzUK/5/
HTML:
<nav>
<ul id="site-nav">
<li class="nav1">Recent</li>
<li class="nav2">Highlights</li>
<li class="nav3">Animals</li>
<li class="nav4">Cars</li>
</ul>
</nav>
<div id="content-listing">
<div id="recent">
<ul class="top-level">
</ul>
</div>
<!--end recent-->
<div id="highlights">
<ul class="top-level">
</ul>
</div>
<!--end highlights-->
<div id="animals">
<ul class="top-level">
</ul>
</div>
<!--end animals-->
<div id="cars">
<ul class="top-level">
</ul>
</div>
<!--end cars-->
</div>
<!--end content-listing-->
JS:
var test1;
var test2;
var test3;
var test4;
function switcher(divToShow, thisVar, otherVar, ajaxContent) {
$("#site-nav li a").parents().removeClass("nav-active");
$(this).addClass("nav-active");
if(otherVar) {
otherVar.detach();
}
if(typeof thisVar === 'undefined') {
thisVar = $(divToShow + "ul.top-level").load('/echo/html/', {
html: ajaxContent
}, function () {
alert("I'm new");
});
} else {
thisVar.appendTo("#content-listing");
alert("I'm old");
}
}
//Recent
$("#site-nav .nav1").on("click", function (event) {
switcher("#recent", "test1", "test2", "<li>1</li> <li>2</li> <li>3</li>");
event.preventDefault();
});
//Highlights
$("#site-nav .nav2").on("click", function (event) {
switcher("#recent", "test2", "test1", "<li>A</li> <li>B</li> <li>C</li>");
event.preventDefault();
});
http://jsfiddle.net/XkzUK/5/
You have error with
otherVar.detach()
because, otherVar is just a string, so .detach() will not work, .detach() accepts jQuery object.
So correct format should be
$(otherVar).detach();
You're passing strings as all of those parameters.
Therefore, calling methods like detach() or appendTo() throws an error, since those methods don't exist on strings.
You need to pass jQuery objects.
HTML:
<div class="container-fluid">
<div class="sidebar">
<ul class="pills">
<li id="l1"><a id="link1">Lesson 1</a></li> <hr>
<li id="l2"><a href="#" >Lesson 2</a></li> <hr>
<li id="l3"><a href="#" >Lesson 3</a></li> <hr>
</ul>
<div class="span16" id="target">
</div>
Javascript:
$('#l1').click(function(){
$('#target').fadeOut('fast', function(){
$('#target').load("lesson/lesson1.html", function(){
$('#target').fadeIn('slow');
});
});
});
I have 5 links within my webpage, I was wondering if there was anyway to make this one piece of code instead of copy + pasting it multiple times.
$('a.AjaxLink').click(function(){
var url = this.href;
$('#target').fadeOut('fast')
.load(url, function(){ $(this).stop(true, false).fadeIn('slow'); });
});
return false;
});
This code handles the click event for all <a>s with a class of AjaxLink.
In the click handler, it grabs the href, fades out your #target, and performs the AJAX load.
When the AJAX load finishes, it stops the animation (in case the AJAX was faster than the fade), then fades it back in.
Finally, it tells the browser not to take the default action (navigating to the page) by returning false.
Use class instead of id. Select elements using class.
Also you can use .each() method
You could do this with a new jQuery method. Given this HTML:
<a class="hello" href="#">Hello</a>
<a class="goodbye" href="#">Goodbye</a>
<div id="target"></div>
You'd use this code:
jQuery.fn.switchTarget = function( target, href ) {
var $target = $(target);
this.bind( 'click', function(e) {
e.preventDefault();
$target.fadeOut('fast', function() {
$target.load( href, function() {
$target.fadeIn('slow');
});
});
});
return this;
};
$('.hello').switchTarget( '#target', 'hello.html' );
$('.goodbye').switchTarget( '#target', 'goodbye.html' );