Hi I have a link inside a <ul> tag I am trying to get the click event of all <a> tag inside the pagination class. This the code
<ul class='pagination'>
<li class='details'>Page 1 of 2</li>
<li><a class='current'>1</a></li>
<li><a href='?page=2'>2</a></li>
<li><a href='?page=2'>Next</a></li>
<li><a href='?page=2'>Last</a></li>
</ul>
what I tried is:
<script>
$(document).ready(function() {
$("a.pagination").click(function(){alert("something..")})
});
</script>
The selector you used will get achor a with class pagination, use descendant selector like this,
Live Demo
$(".pagination a").click(function(){alert("something..")})
To exclude ".current"...
$(".pagination a[href]").click(function(){ alert("something..")}) });
You are selecting a.pagination which is wrong.
Try:
$(document).ready(function(){ $("ul.pagination a").click(function(){alert("something..")}) });
Related
I'm trying to create a list in HTML where each item in the list can be clicked.But I need to know the ID of the item that was clicked.
I have been trying to have a div surround the list item and have an onClick and a ID tag associated. Then get the ID tag from the synthetic event.
But my list items are complex so they have sub DOM elements. Meaning if I click the <p> it will not return the ID associated with the div tag.
I'm not sure what the best would be to do this? strong text
Here are some solutions you can reference:
If using jQuery, try this api: ele.closest("div") to get the outer div tag
Study the javascript event popup and catch, after that you will get the answer
This question got very good answer here: JavaScript - onClick to get the ID of the clicked button
Orginally it demonstrates button click but you can use it for your li element (or any element) that you wish.
Good luck!
let li = $("li");
li.on("click", getId);
function getId(e) {
e.stopPropagation();
let id = $(this).attr("id");
console.log(id + " was clicked!");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="element_1">1. Click me</li>
<li id="element_2">2. Click me
<ul>
<li id="element_2.1">2.1. Click me</li>
<li id="element_2.2">2.2. Click me</li>
<li id="element_2.3">2.3. Click me</li>
</ul>
</li>
<li id="element_3">3. Click me</li>
<li id="element_4">4. Click me</li>
</ul>
I hope this helps and if i understood you question correctly
in your HTML you can try this
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
and in jquery try this
$(document).on("click", ".test", function (e) {
e.preventDefault();
alert($(this).attr("id"));
});
<ul class="dropdown-menu">
<li>Deutsch</li>
<li>Denmark</li>
I want to find out with jQuery what point of the dropdown menu was clicked.
I tried it so:
<ul class="dropdown-menu">
<li>Deutsch</li>
<li>Denmark</li>
jQuery:
$("#changeLanguage").click(function(){
alert($(this).attr("requestLanguage"));
});
But only the first dropdown point (german) calls the jQuery Event. Denmark has no function.
How I can realize it?
An id can only be used once on the page. Change them to a class like so:
HTML
<ul class="dropdown-menu">
<li>Deutsch</li>
<li>Denmark</li>
</ul>
JS
$(".changeLanguage").click(function(e){
e.preventDefault()
alert($(this).attr("requestLanguage"));
});
FIDDLE
I'm trying to create a click event on a jQuery fly out menu. Once you hover to the 2nd or 3rd layer is where I need the event to take place.
I'm also new to jQuery so forgive me if the code isn't up to standards.
I have a sample here: http://jsbin.com/makoreficexe/1/edit
If I understood it right, you just want to have a click event inside the sub items of menu.
To do that, you need to find a way to identify the tag that was clicked, and there are a lot of ways.
I'll show you just 3 examples, but there are a lot...
1 - you can have a class for every tag that you want to click.
HTML - specifying a class
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a class="About" href="#">About This Template Here</a></li>
<li><a class="Flash" href="#">Flash</a></li>
<li><a class="Jquery" href="#">jQuery</a></li>
</ul>
</li>
Js
$(document).ready(function($) {
$(".About").click(function(){
alert("clicked")
}),
$(".Flash").click(function(){
alert("clicked")
})
});
The problem in this case is that is difficult to manage a lot of classes.
2 Using Id's
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a id="About" href="#">About This Template Here</a></li>
<li><a id="Flash" href="#">Flash</a></li>
<li><a id="Jquery" href="#">jQuery</a></li>
</ul>
</li>
JS
$(document).ready(function($) {
$("#About").click(function(){
alert("clicked")
}),
$("#Flash").click(function(){
alert("clicked")
})
});
The problem is that could be harder to manage a lot of ids as well. but i guess that is the better approach for your simple scenario
3 - You can get it using nth child. the problem is that if you change the structure of your html file, it can "break" your jquery selector.
$("#navList li:nth-child(2)").click(function(e){
alert(e);
})
Here is a list with a lot of types of jquery selector .
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
Hope it helps.
$('.listTab a').click(function(e){...});
One approach would be to add "data" attributes to your a tags (http://api.jquery.com/data/).
For example, in the html for your first flyout:
<li><a data-whatever="This is in data-whatever" href="#">About This Template Here</a></li>
And in your jQuery ready bit, add this:
$('.listTab li a').click( function (e){
e.preventDefault(); // this prevents the href="#" in your a tag from firing
console.log($(this).data('whatever'));
});
You can then use the 'data-whatever' attribute in your click function to trigger what needs to happen.
http://jsbin.com/budoqizumuja/3/edit?html,css,js,console,output
I've got the following html code:
<div id="menuItems" class="hidden">
<ul>
<li><a class="fgMenuItem" href="#">MenuItem #1</a></li>
<li>
<a class="fgMenuItem" href="#">MenuItem #2</a>
<ul>
<li><a class="fgMenuItem" href="#">SubItem #1</a></li>
<li><a class="fgMenuItem" href="#">SubItem #2</a></li>
</ul>
</li>
<li><a class="fgMenuItem" href="#">MenuItem #3</a></li>
<li>
<a class="fgMenuItem" href="#">MenuItem #4</a>
<ul>
<li><a class="fgMenuItem" href="#">SubItem #3</a></li>
<li><a class="fgMenuItem" href="#">SubItem #4</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$(".fgMenuItem").bind("click",function() {
alert('test');
});
});
</script>
I'm using Filament Group's iPod menu and the menus are working fine, but my jQuery code is not working. I'm trying to make it so that when an item is clicked, it executes my alert('test');.
I suspect the problem may be that Filament Group is overriding my click event handler, but I'm not sure how to fix it. I tried going into their javascript file and changing all the .click(function() { to .bind("click", function() {, but this didn't seem to make any difference. Any suggestions would be great!
Just tested and all working fine for me, you are including jQuery at the top of your document right?
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
</head>
$(function() {
$(".fgMenuItem").on("click",function() {
alert('test');
});
});
JSFiddle: http://jsfiddle.net/jv584/
EDIT: If you're able to set up a fiddle or provide more code (working demo page perhaps?) then I'll take another look and see if I can spot the problem
I have the following HTML:
<ul id="tabs">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
I want to perform a unique action when someone clicks on each of the links.
I tried the following and it did not work
$("#tabs li").eq(1).live('click',function(){alert('ONE....');});
$("#tabs li").eq(2).live('click',function(){alert('TWO......');});
$("#tabs li").eq(3).live('click',function(){alert('THREE......');});
Any idea how I can perform a unique action when someone on the link?
Thanks
I believe you're going for
$("#tabl li:eq(0)").live('click', ...)
$("#tabl li:eq(1)").live('click', ...)
$("#tabl li:eq(2)").live('click', ...)
Make sure you start with zero, and place the 'eq' selector inside the same selector as the 'li'. The rest of your code is poifect. :-)
Give the li's ids:
<ul id="tabs">
<li id="tab1">One</li>
<li id="tab2">Two</li>
<li id="tab3">Three</li>
</ul>
Then your script would just be:
$('#tab1').click(function() { alert('tab1'); });
$('#tab2').click(function() { alert('tab2'); });
$('#tab3').click(function() { alert('tab3'); });