I have this markup:
<ul><li id="link-notifications">
<ul class="list-notifications" style="display:none">
<li>Item 1</li>
</ul>
</li>
</ul>
with this Jquery:
$('#link-notifications').click(function(e){
e.preventDefault();
e.stopPropagation();
$(this).find('.list-notifications').slideToggle('medium');
});
but whenever the list slides down, and I click the link, the list just slides back up. I have heard that stopPropagation works so I added it but it does not work. I even tried adding it to the slideToggle callback but it just stops the slideUp action. Any ideas?
Binding click event only to #link-notifications ans escaping its inner contents.
$('#link-notifications, :not("#link-notifications > *")').click(function(e){
e.stopPropagation();
$(this).find('.list-notifications').slideToggle('medium');
});
Working sample
You don't need e.stopPropagation() inside that event but in the click of the link.
Just add
$('.list-notifications').click(function(e){
e.stopPropagation();
});
http://jsfiddle.net/N6pYU/1/
HTML
<ul>
<li id="link-notifications">
link-notifications
<ul class="list-notifications">
<li>Item 1</li>
</ul>
</li>
</ul>
jQuery
$('#link-notifications>a').click(function(event){
$(this).siblings('ul.list-notifications').slideToggle('medium');
});
I attached the event not to a parent of what I wanted to slide but a sibling. This keeps weird events from bubbling.
Fiddle: http://jsfiddle.net/iambriansreed/59e3F/
Related
The else condition of my if/else is not firing. The condition is for the li.catparent, so that if it is clicked, I can have certain code fired. If one of the other items without 'li.catparent' is clicked, then different code will be fired. Perhaps someone could tell me what I'm missing? My if/else statement is very simple, and I'm not sure why it isn't firing. I definitely missing something.
HTML:
<ul class="portal-filter categorylist" id="filter">
<li class="all"><a class="selected" href="#" data-filter="*">All</a></li>
<li class="category">Category 1</li>
<li class="category">Category 2</li>
<li class="catparent">
<span class="catparenttxt">
Category Parent
<span class="subnavarrow"></span>
</span>
<ul class="subcatlist">
<li class="category">Subcategory 1</li>
<li class="category">Subcategory 2</li>
<li class="category">Subcategory 3</li>
</ul>
</li>
<li class="category">Category 1 and 2</li>
</ul>
jQuery
$('ul.categorylist > li').on('click', function(){
if($(this).hasClass('catparent')){
console.log('category parent clicked');
}
else{
console.log('category without parent clicked');
}
});
or
$('ul.categorylist > li').on('click', function(){
if($(this).hasClass('catparent')){
console.log('category parent clicked');
}
else if(!$(this).hasClass('catparent')){
console.log('category without parent clicked');
}
});
Here's a Fiddle that seems to be working with the simple code.
Here's a fiddle with my entire project code included that shows it isn't working.
This issue appears to be related to the media boxes plugin that you have used. If you take the $('#grid').mediaBoxes({ ... }); part out of the broken JSFiddle you have provided, it works perfectly as expected. You can see this fix in the updated JSFiddle here.
To work around this issue, you need to handle the clicks on the a tags inside the list items as well:
$('ul.categorylist > li, ul.categorylist > li a').on('click', function() {
....
});
The reason is that the click-event is actually only triggered for the li.catparent; this is due to the anchor-elements inside the other lis, that consume the mouse click.
You can add a handler to those, too, to receive the event:
$('ul.categorylist li a').on('click', function(e) {
alert('a inside li clicked');
}
Hi i am trying to remove an item that is hyperlinked with Jquery and it doesn't seem to be working out that good, can someone shed a little light? Thanks.
HTML Code:
<ul id="displayAgency">
<li>Item One
</li>
<li>Item Two
</li>
<li>Item Three
</li>
<li>Item Four
</li>
</ul>
Jquery:
$('#displayAgency').click('click', function () {
$("li itemDelete").remove();
return false;
});
You are missing the class selector :
$("li .itemDelete").remove(); //Which is a dot
You might wanna note that this will delete all li no matter which one you click and go back to the top of the page.
Are you looking for this instead?
$('#displayAgency .itemDelete').on('click', function (e) {
$(this).remove(); //This remove the 'a' but keep the 'li'
//$(this).parent().remove(); would remove the 'li'
//return false; You should use prevent default
e.preventDefault();
});
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
given this HTML,
<div id="dd_container" class="dd dd_container">
<ul class="dd_deploy">
<li class="dd_deploy">
more options
</li>
</ul>
<ul class="dd">
<li class="dd">
el1
</li>
<li class="dd">
el2
</li>
<li class="dd">
el3
</li>
</ul>
</div>
why does this jquery function print to the console two times?
$(document).on('click','.dd_deploy', function(){
console.log($(this).parents('.dd_container').children('ul.dd'));
});
http://jsfiddle.net/mBPfG/
Because you have 2 .dd_deploy elements, one nested inside the other so the event is bubbling.
<ul class="dd_deploy">
<li class="dd_deploy">
more options
</li>
</ul>
If this HTML structure is intended, you can use event.stopPropagation to prevent the event bubbling, like this:
$(document).on('click','.dd_deploy', function(e){
e.stopPropagation();
console.log($(this).parents('.dd_container').children('ul.dd'));
});
Note also that having $(document) as the primary selector on a delegated event handler is not the ideal for performance. Instead of document use the nearest element which is not appended to the DOM dynamically.
Because the event is bubbling through the <li> to the <ul>.
See my modification:
$(document).on('click','.dd_deploy', function(event){
console.log(event.target)
});
It will print the <li> element, followed by the <ul> element.
To prevent this, you need your event handler to either return false or call event.stopPropagation().
$(document).on('click','.dd_deploy', function(e){
e.stopPropagation(); //stops the bubbling
console.log($(this).parents('.dd_container').children('ul.dd'));
});