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
Related
When the cursor hovers over my link, I want it to display a message saying "Hovering". I have tried the code below, but it does not create this window. Why not?
HTML:
<body>
<nav id="menu">
<ul>
<li><a href="index.html" id="home_button">
</ul>
</nav>
</body>
Javascript:
$(document).ready(function()
{
$("#menu ul li a").mouseover(function()
{
alert("Hovering");
});
});
Your code works, you just need to fix your HTML tags.
You are missing the anchor and list-item closure tags.
<nav id="menu">
<ul>
<li>Home</li>
</ul>
</nav>
JSFiddle: https://jsfiddle.net/40acxxet/1/
i thought i had solved my problem, but not.
I use a normal call to load content and it works easy, fast and fine.
$( document ).ready(function() {
$('#leftmenu').jstree();
$('.jstreelink').click(function(){
alert("Clicked!");
$('#maincontent').load(this.href)
return false;
});
});
<div id="leftmenu">
<ul>
<li>Admin
<ul>
<li><a class="jstreelink" href="backend/test4.php">task1</a></li>
<li><a class="jstreelink" href="backend/test3.php">task2</a></li>
</ul>
</li>
<li>Moderator
<ul>
<li><a class="jstreelink" href="backend/testp.php">task3</a></li>
<li><a class="jstreelink" href="backend/test1.php">task4</a></li>
</ul>
</li>
<li><a class="jstreelink" href="backend/test.php">task5</a></li>
</ul>
</div>
I added a test alert, and i only get that alert when clicking on task5.
I have tried different combinations, but when clicking on a leaf , nothing happens. Also checked with Firebug.
repeatingly clicking on task 5 fires everytime the alert and does load the html in the maincontent div.
So it seems this isn't a normal jquery problem,but a problem with jsTree (and myself of course:))
I am using
jQuery v2.1.3
jsTree - v3.0.9
Thanks in advance for any comment.
Try this
$('#leftmenu').on("select_node.jstree", function(a,b){
alert(b.node.a_attr.href);
$('#maincontent').load(b.node.a_attr.href)
return false;
});
Thanks maddin, but i already found the solution:
$( document ).ready(function() {
$('#jstree').jstree();
$('#jstree').on('click', '.jstreelink', function() {
$('#maincontent').load(this.href);
});
});
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'm trying to add an attribute "selected" to a button. It's a group of 5 buttons but I just want one of them to be "selected" according to the page title.
This is what I have: http://jsfiddle.net/M6Ypu/
<ul id="menu">
<li>
<a id="Home" class="selected" href="#">Home</a>
</li>
<li>
<a id="categories" class href="#">Categories</a>
</li>
<li>
<a id="franchise" class href="#">Franchise</a>
</li>
<li>
<a id="about" class href="#">About</a>
</li>
<li>
<a id="contact" class href="#">Contact</a>
</li>
</ul>
Those are in a Master Page for ASP.NET and I want to change the class of the buttons so if I am at categories.aspx the class for a#categories is changed to "selected".
Hope you can help me.
Try something like this:
$(document).ready(function(){
$("ul#menu a").click(function(){
$("ul#menu a").each(function(){
$(this).removeClass('selected');
});
$(this).toggleClass('selected');
});
});
Working fiddle: http://jsfiddle.net/robertrozas/M6Ypu/3/
I could make it work by adding a script to the pages using the Master Page
Home page has this code and the selector changes depending on the page I am:
<script>
$(document).ready(function () {
$('a.selected').removeClass();
$('a#Home').addClass("selected");
});
</script>
Since there were only 5 pages, it was much easier to just add the script to each one of them.
I'm trying to register a click event for a menu list button identified by a class, but it doesn't seem to be firing. My code is as follows:
<body>
<!-- jQuery Simple Drop-Down Menu http://javascript-array.com/scripts/jquery_simple_drop_down_menu/# -->
<div id="dropDownDiv" style="width: 908px; height: 24px; margin: auto auto; background: #324143;">
<ul id="jsddm">
<li>Item 1
<ul>
<li><a class="btn myOtherClass" href="#">Button 1</a></li>
<li><a class="btn myOtherClass"href="#">Button 2</a></li>
</ul>
</li>
<li>Item 2
<ul>
<li><a class="btn myOtherClass" href="#">Button 3</a></li>
<li><a class="btn myOtherClass" href="#">Button 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
And in my script I have the following:
/* Register the click event for menu buttons */
$('.btn').click(function () {
alert("You clicked a button");
});
The alert never fires and I'm not sure why, any help is appreciated.
UPDATE:
The code in the link works for me to, not sure why it's not working in my project. I'm in an Eclipse PHP Project environment with Java resources enabled. I tried my project in Chrome and Firefox, not working for either. I'll check the rest of my script.
UPDATE 2:
Looks like Shef's recommendation about wrapping in a .ready function did the trick. I still don't understand why it needs that to work, "c=smiles"'s link worked without it.
Works fine for me, check it out. Maybe you didn't include jQuery? Or, you are not wrapping your event listener bind code inside a document ready like this:
$(document).ready(function(){
$('.btn').click(function () {
alert("You clicked a button");
});
});
are you using stopPropagation or return false in another click event that may have prevented the click event from happening?
Is the jQuery used after jQuery has been loaded?
Is the in the DOM at the time of binding? (use delegate instead of click if not, or bind after loading)