Open an anchor link inside a div - javascript

I want to prevent an anchor link to open on the document body and instead render inside a div. I've used e.preventDefault() but I think JQuery isn't targeting that event.
I'm programmatic-ly creating a ul and appending li's to it from array items then appending the ul to a div. The structure looks like this:
//this is just a structure, not the actual HTML
<div id="results">
<ul> .ulStyle
<li> .list-group-item
-header
-p .lead
-a .anchorStyle
</li>
</ul>
</div>
Then, I add classes to each element. Everything but the ul is getting the class and I think that may be why it's not targeting the anchors.
jQuery:
$(function(){
console.info('** anchor-tag click handler **')
/*
I've tried variations on the targeting from a
single $('.anchorStyle') to what you see below.
*/
$('div #results ul .ulStyle li .list-group-item a .anchorStyle')
.click(function(e) {
e.preventDefault();
$('#results').empty();
$('#results').load( this.getAttribute('href') );
console.log('anchor clicked...');
});
});
I get the first console message on reload but not the second on click.
Questions:
Do I need a class on the ul to target it properly? I'm only adding
it to the ul for that purpose.
Does this piece of code execute with everything else and the ul may not have been created yet? JS/jQuery should
still bind and keep listening to an event if it exists - or in this
case, find the element I'm targeting after the click event fires,
no?

Couple of problems in the code to point out...
First is that the selectors are not right. You have a space after your element and it's class which is wrong (Eg:ul .ulStyle here .ulStyle is considered as a child of ul).The selector must be like this
$('div#results ul.ulStyle li.list-group-item a.anchorStyle')
Notice I have removed the spaces between the element and it's class..
Even after getting this changes done it still won't work for you because the elements are added dynamically. Taking this line from the OP
I'm programmatic-ly creating a ul and appending li's to it from array items then appending the ul to a div.
So this calls for a need to use event delegation
The syntax must change to
$(document).on('click','div#results ul.ulStyle li.list-group-item a.anchorStyle',function(){//your stuff here});
Further you can keep the selector simple as
'#results a.anchorStyle'

Here you have a working example with your structure:
$('#results ul li a').click(function(e){
e.preventDefault();
console.log(this.href);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
<ul>
<li>
<header>HEADER</header>
<p></p>
ANCHOR
</li>
</ul>
</div>

Related

Why isn't jQuery removeClass working with a click function?

I can't seem to understand why removeClass isn't removing the active class when I click on another li. If it were the same li then I could use siblings to remove the class but sadly that doesn't work here either.
I'd like to understand this simple problem that I'm having.
$('.r-picker li').click(function(){
$('.r-picker li .data.active').removeClass('active');
$('.r-picker li .data').addClass('active');
});
.active{
color:red;
font-size:25px;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-picker">
<ul>
<li>
<div class="data">me1</div>
</li>
<li>
<div class="data">me1</div>
</li>
</ul>
</div>
http://jsfiddle.net/Lb65e/125/
Updated fiddle.
You should use $(this) instead to refer to the clicked li :
$('.data', this).addClass('active');
Else the .data selector in your code will add class to all the elements with this class :
$('.r-picker li .data').addClass('active');
NOTE : Also you need to remove the class active from all the elments with class data when you click using :
$('.r-picker li .data').removeClass('active');
Hope this helps.
$('.r-picker li').click(function() {
$('.r-picker li .data').removeClass('active');
$('.data', this).addClass('active');
});
.active{
color:red;
font-size:25px;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-picker">
<ul>
<li>
<div class="data">me1</div>
</li>
<li>
<div class="data">me1</div>
</li>
</ul>
</div>
Your code is working. Here's what it does:
$('.r-picker li .data.active').removeClass('active');
That finds all elements with classes data and active, and removes active from all of them.
$('.r-picker li .data').addClass('active');
That finds all elements with class data and adds the class active to all of them.
Thus, once that runs, you'll have added the class active back to all the elements from which it was removed.
In your event handler, when adding the class, you need to add it only to the <li> involved:
$(this).find(".data").addClass("active");
The jQuery event mechanism makes sure that this is bound to the DOM element involved with the event, so $(this) gives you a jQuery object for that element. The .find() method performs a DOM selector search starting from that element, so $(this).find(".data") finds elements with class data only in the DOM subtree beneath the clicked element.
You need to highlight the div in the current li.
$('.r-picker li').click(function() {
$('.r-picker li .data.active').removeClass('active');
$(this).find('.data').addClass('active');
});
Which first removes the active class, and then find the div.data in .this li and adds the class back...
Heres your fiddle updated and working: http://jsfiddle.net/Lb65e/126/

Add/Remove Class of a link with jQuery inside a nav ul li h4

I have 5 a link items in a row, encapsulated within a h4 and the h4 within li element and the li within ul which it's finally nested in a nav element.
At the moment, the role of a (thanks to a very helpful example that I found here) when clicked is to change the content of the divs (that contain images and text).
What I would like to do in addition, is that when you click the link and the content changes, I would like a link to receive the "active" class, which has white color and certain other css attributes.
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
the function that swaps the content
<nav id="nav2">
<ul class="tabz">
<li><h4>Szenario 1</h4></li>
<li><h4>Szenario 2</h4></li>
<li><h4>Szenario 3</h4></li>
<li><h4>Szenario 4</h4></li>
<li><h4>Szenario 5</h4></li>
</ul>
</nav>
When the page loads, everything displays correctly. When I click the second link I would like the "active" class to be removed from first link and go to the sencond.
(The css of the active class is just some color and border differences.)
Thank you very much in advance.
Attach handler for those anchor tags by using the attribute starts with selector, since you are having href with same beginning. And by using the $(this) reference set the active class and remove the active class from all of its anchor siblings.
Try,
$('[href^="#tabs"]').click(function(){
$(this).addClass('active');
$(this).closest('.tabz').find('a').not($(this)).removeClass('active');
});
$('[href^="#tabs"]').click(function(e){
$(this).addClass('active').parents('li').siblings().find('a').removeClass('active');
});
With the markup you have, the clicked a element won't have any sibling, but its li parent will, so this code will work as expected, see here : DEMO

Using jQuery .remove() to take <li> elements out of an <ol> but the DOM still thinks that the <li> elements are there?

I have a function that removes li elements from an ol when you click on an icon. When the ol is totally emptied, I would like to replace the li with a bit off filler material so that the user can still drag and drop new li elements into the list. (It's kind of a shopping cart setup.)
The problem that I'm running into is that when I use jQuery .remove() the li is removed from the DOM BUT jQuery doesn't it as being gone. So, for example, calling .has(".li") returns true even when all the li's are gone, and calling childNodes.length returns the total number of li that have ever existed in the ol. Code follows:
function onClick(element)
var parent = $(element).parent().attr('id');
$(element).remove();
var container = document.getElementById(parent);
console.log(container.childNodes.length); //always logs the total number that have ever existed
if(container.childNodes.length < 1){
parent.append("<li class='placeholder'>Drag and Drop Components Here</li>");
I'm pretty sure that this isn't the problem because I've been careful to grab the parent container only after the element was removed from the DOM.
Any ideas?
EDIT: The requested ul and li structure:
<h4>Components</h4>
<ol id="components" class="droppable">
<li class="placeholder">Drag and Drop Components Here</li>
</ol>
Users drag and drop the following code into the list, which is retrieved via $.get from some php scripts.
<li id="$id"><table style="color:white"><tr><td>$this->longname</td>
<td>Delete image</div></td></tr></table></li>
The click handler is the code above.
Assuming you have misplaced the function name onClick instead of destrComp, there are multiple problems.
To the click handler you are passing the clicked anchor element not the li element as you as assuming, so when you say $(element).parent() or $(element).remove() it is not dealing with the elements you think it is dealing.
Try
function destrComp(element) {
var $parent = $(element).closest('ul');
$(element).closest('li').remove();
if ($parent.children().length < 1) {
$parent.append("<li class='placeholder'>Drag and Drop Components Here</li>");
}
}
According to your code you seem to be removing the "a" tag, but not the parent.
$(element).remove(); //This removes the a tag
$(element).parents('li').remove(); //This removes the parent li element

Add return false to parent link only with jQuery

I have a list inside a toggled div...
<li>
Link
<ul stlye="display:none;">
<li>Child Link</li>
</ul>
</li>
Ive written a piece of jQuery to toggle the display of the child UL only when a child link is clicked it no longer works (It doesnt go through to google), can anybody see where im going wrong?
// Dropdown
$('.archives ul li a').click(function(){
$(this).parent().find('ul').slideToggle();
return false;
});
STYLE is spelled wrong.
stlye=
From your post's title it appears you want something like this...
$('.archives ul li a').click(function(){
var $children = $(this).parent().find('ul');
$children.slideToggle();
return $children.length > 0 ? false : true;
});
Return will be false only when child ULs are found.
Assuming what you've shown is inside a ul which is in turn inside an element with class archives, then the selector .archives ul li a matches both the parent and child anchors, because you've used a descendant selector, and so your handler gets called for the child, and the return false; prevents it from doing its default action (following the link).
If your goal is to have the handler triggered only for the earlier link and not for the child link, then you may need to be more specific. You haven't shown enough of your markup for us to help you be more specific, though. If I assume your markup looks something like this:
<div class="archives">
<ul>
<li>
Link
<ul style="display:none;">
<li>Child Link</li>
</ul>
</li>
</ul>
</div>
...then the selector to match only the "Link" anchor and not the "Child Link" anchor would be .archives > ul > li > a (e.g., using direct child selectors).
Also note that you had stlye rather than style, but I assume that's just a typo in the question. (Why don't people use copy and paste?! ;-) )
The ChildLink is also matched by your selector, and in the click handler you're preventing the default action (which would be "navigate to Google").
So you should adapt your selector to only get the toggle Link, or you use this:
$('.archives ul li a').click(function(e){
if ($(this).siblings('ul').slideToggle().length) // if we found a list to toggle
e.preventDefault(); // or return false
});
Since your return false statement is cancelling the default link action, you need to be more specific so that you don't target the links that want to allow to continue to function.
Try this:
$('.archives > li > a').click(function () {
$(this).parent().find('ul').slideToggle();
return false;
});
jsFiddle example
By using the > child selector and changing the target to only the immediate child links of the outermost list, the sublinks won't be selected and will continue to work. In your code your $('.archives ul li a') will apply to any child links, not just the top level.

Changing Style with click in jQuery

i am trying to make a to do list app. When i click a span with class "check" then i want to apply a style. Then the class of the span will change to "uncheck". When click the uncheck then the previous style will restore. Here is the html and jquery what i have done so far.
Problem: Problem is when i first click the span it works The "uncheck" class get removed and "check" class get added. Then the second part not works. I suspect the second part don't working because the "check" class is not in the dom when document.ready() is runs.
Any help will be greatly appreciated! Thanks!
HTML:
<div class="note-body">
<ol>
<li>M2u category shown. M2u category shown M2u category shown M2u category shown.
<span title="Delete" class="delete"></span>
<span title="Task Done!" class="done"></span>
<span class="handle"></span>
<span class="handle"></span>
</li>
<li>M2u category shown</li>
<li>M2u category shown</li>
</ol>
</div>
jQuery:
$('.note-body ol li span.check').click(function(){
$(this).addClass('uncheck').removeClass('check');
$(this).parent().css({'text-decoration':'line-through', 'color':'#5b382e'});
});
$('.note-body ol li span.uncheck').click(function(){
$(this).addClass('check').removeClass('uncheck');
$(this).parent().css({'text-decoration':'none', 'color':'#5b382e'});
});
RESOLVED:
Had to use the live(); because i am adding dom dynamically. Here is the final code (placed the styles in classes):
$('.note-body ol li span.check').live('click', function(){
$(this).addClass('uncheck').removeClass('check');
$(this).parent().addClass('task-done').removeClass('task-notdone');
});
$('.note-body ol li span.uncheck').live('click', function(){
$(this).addClass('check').removeClass('uncheck');
$(this).parent().addClass('task-notdone').removeClass('task-done');
});
You are correct. Since the 'uncheck' class is dynamically added to the DOM, you need to use the jQuery live API. Try this:
$('.note-body ol li span.uncheck').live('click', function(){
$(this).addClass('check').removeClass('uncheck');
$(this).parent().css({'text-decoration':'none', 'color':'#5b382e'});
});
use jquery live or delegate as they are added runtime
http://api.jquery.com/live/
http://api.jquery.com/delegate/
Do you really need an uncheck class? Are there three states check, uncheck and 'nothing'? Getting rid of the uncheck class you could simplify your code.
I would do:
$('.note-body .some_other_identifier').live('click', function() {
$(this).parent().toggleClass('check');
});
Adding
.some_other_identifier {'text-decoration':'line-through'; 'color':'#5b382e'; }
.check .some_other_identifier { 'text-decoration':'none'; 'color':'#5b382e'; }
to your css.

Categories