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"));
});
Related
I have this HTML:
<ul>
<li class="selected">
..
</li>
<li>
..
</li>
<li>
..
</li>
</ul>
<div id="firstDiv"></div>
When the li a is clicked I want to set it's title as the content in #firstDiv. I'm a newbie in this and I need help.
Just take the title attribute from the item clicked $(this) using .attr('title') and place the text in the div using .html() or .text():
$('a.myClass').click(function(){
$('#firstDiv').html($(this).attr('title'));
});
The only reason to use e.preventDefauilt() is if the page can scroll down, as a # bookmark link will spring to the top:
$('a.myClass').click(function(e){
e.preventDefault();
$('#firstDiv').html($(this).attr('title'));
});
This is what I'd do:
$("a").click(function(e){
e.preventDefault();
$("#firstDiv").text($(this).attr("title"));
});
Here is the JSFiddle demo
I am quite new to html, css, and javascript and I was wondering if there is a way to make a <li> element not clickable. Basically I want to have one active element and the have the other elements disabled and not clickable.
Right now when I click on some other <li> the active moves to that element and I can't figure out how to leave it on the first element.
You will need to post code of the dropdown as it is impossible to help you further without knowing how the <li> tags are being triggered.
Here is a jQuery example that shows a very simple list item menu.
jsFiddle Demo
I added two ways to stop the <li> elements from being clickable: simple boolean switch, and using jQuery's .off() method.
HTML:
Some List Items:<br>
<ul>
<li>First Item</li>
<li class="active">Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
<input id="mybutt" type="button" value="Disallow First Click" />
jQuery/javascript:
var ok2change=1;
$('body').on('click', 'li', function() {
if (ok2change==1){
$('li').removeClass('active');
$(this).addClass('active');
ok2change=0;
}
});
$('#mybutt').click(function() {
$('body').off('click', 'li');
$(this).val('First click disallowed also');
});
Add some css class to the "active" li element and change the selector of the attached handler, so that it attaches only to it:
$("li.someCssClass").click(function() {
// ...
});
here only li elenements having "someCssClass" will react on the click, others will not.
I am attempting to build a Jquery/CSS drop down menu and things have been going pretty good so far. I'm pretty new to JQuery and I get it most of the time - however, I cannot figure out what I am doing wrong here.
I am attempting to change the class of one of the drop-down tabs when it is clicked, but it doesn't appear to be working as expected.
You can see the code I have so far over here:
http://jsfiddle.net/utdream/NZJXq/
I have the class "selected" looking how I want the button to look when a button is clicked on, but I cannot seem to make it so the "selected" class is applied on a click event. In theory, this:
<li id="menuProducts">Products
<div id="ProductsMenu">
<ul>
<li>Submenu Item</li>
<li>Submenu Item</li>
</ul>
</div>
</li>
Should change this this on a click event:
<li id="menuProducts">Products
<div id="ProductsMenu">
<ul>
<li>Submenu Item</li>
<li>Submenu Item</li>
</ul>
</div>
</li>
And this is my current jQuery (which doesn't work):
jQuery(document).ready(function () {
$('#menuProducts a:first').on('click',
function () {
$("a:first").removeClass("hasmore");
$("a:first").addClass("selected");
menuSubCloseAll.call(this, 'menuProducts');
$('#menuProducts').find('li').slideToggle(200);
});
});
I've tried rewriting this code in many,many different ways and I'm running out of ideas on what I could be doing wrong.
Anyone out there have any pointers on what I could do to fix this?
Thank you in advance!!
Do it like this:
jQuery(document).ready(function () {
$('#menuProducts a:first').on('click',
function () {
$(this).removeClass("hasmore");
$(this).addClass("selected");
menuSubCloseAll.call(this, 'menuProducts');
$('#menuProducts').find('li').slideToggle(200);
});
});
You were actually changing the class of the first <a> in your page, not the <a> you clicked, which you can access directly in the handler with $(this) .
Did you try use "this" inside the call??
$('#menuProducts a:first').on('click',
function () {
$(this).removeClass("hasmore");
$(this).addClass("selected");
menuSubCloseAll.call(this, 'menuProducts');
$('#menuProducts').find('li').slideToggle(200);
});
It worked for me
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..")}) });
Using Firebug I have found that the Dynatree plugin changes the following code:
<li id="id3.1" class="expanded">Menu 1
<ul>
<li id="id3.1.1">Sub-menu 1</li>
</ul>
</li>
To this:
<li class="">
<span class="dynatree-node dynatree-exp-c dynatree-ico-c">
<span class="dynatree-connector"></span>
<span class="dynatree-icon"></span>
<a class="dynatree-title" href="#">Sub-menu 1</a>
</span>
</li>
So when I try to make a click event on the id="id3.1.1" nothing happens because this id doesn't exist anymore.
I made a search here and found the onActivate option that will make my click happen on the menu:
$("#treeMenu").dynatree({
onActivate: function(node){
var menuTitle = node.data.title;
alert(menuTitle);
}
});
My question: Is this the only way to do the click event using Dynatree?
Well I think that is the best option, because it uses the API of the plugin, but of course you could still attach an event to the <a> like this:
$('a.dynatree-title').live('click', function(e){
//here e.target is the link you have clicked
});