preventDefault() won't work for me - javascript

Why will this refuse to work?
HTML stuff
<div id="nav-bar">
<ul>
<li>
<span>
Contact
</span>
</li>
</ul>
</div>
Javascript stuff
$('div#nav-bar').filter('a').click(function(event){
event.preventDefault();
});

Filter only filters what is already selected. In your case, the #nav-bar element.
You need this:
$('div#nav-bar a').click(function(event){
event.preventDefault();
});

filter is the wrong method to use here. you should either use find to look for elements in a selection:
$('div#nav-bar').find('a')...
or simply combine that into one selector:
$('div#nav-bar a')...
after you've fixed that, your preventDefault will actually get applied and work, theres nothing wrong with that piece of code directly.

Related

change the text of the first span with jQuery

I've tried a number of things but I cannot get my code to work. I want to change the text of the span containing a number in this code:
<li class="top">
<div class="sec">
<span>123</span>
<span class="inner">Lorem</span>
</div>
</li>
My JavaScript/JQuery:
(function($) {
$(document).ready(function() {
$('li.top .sec').find('span').eq(0).text('cccc');
});
})(jQuery);
I've been able to write code that changes both spans, but not the one.
Your code body appears to work to largely work.
I just tried inserting this line into the doc as follows:
$('li.top .sec').find('span').eq(0).text('cccc');
See http://jsbin.com/leyasiwexu/edit?html,js,output
So, perhaps there is something else that is causing the issue?
console.log($('li.top .sec').find('span').eq(0).text());
$('li.top .sec').find('span').eq(0).text('cccc')
console.log('changed to: ' + $('li.top .sec').find('span').eq(0).text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="top">
<div class="sec">
<span>123</span>
<span class="inner">Lorem</span>
</div>
</li>
(function($) {
$(document).ready(function() {
$('li.top .sec').find('.inner').prev().text('cccc');
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="top">
<div class="sec">
<span>123</span>
<span class="inner">Lorem</span>
</div>
</li>
the .prev() method searches for the predecessor of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.
The method optionally accepts a selector expression of the same type that can be passed to the $() function. If the selector is supplied, the preceding element will be filtered by testing whether it match the selector.
Excerpt taken from the JQuery prev documentation
You can try this:
$('li.top .sec').find('.inner').prev().text('cccc');
I haven't checked, HTML Specifications, but I don't think its appropriate to nest a div inside li. I know you can work your way around presentation irregularities with css, but this might not be permissible with jQuery. Just as I said, I haven't verified. If you have to nest items inside li, use inline elements. div is block

How to remove cloned elements

With Jquery, I am trying to make a function similar to the filtering system used in this website(example)
If you click one of the filter elements, it will be displayed in another area. You can remove the selected filter by just clicking it.
My code works for cloning a filter element and displaying it in another area but
I am having a trouble with removing it.
I did hours of research but could not find any solution so your help will be greatly appreciated!
Here is my code
---html---
<div id="filter-selected>
<ul>
<!--selected element comes here -->
</ul>
</div>
<div id="filter-options">
<ul>
<li>
<!--clicking this list will clone itself to the above area-->
<span>Value1</span>
</li>
<li>
<!--clicking this list will clone itself to the above area-->
<span>Value2</span>
</li>
</ul>
</div>
---Jquery---
$('#filter-options > ul > li').click(function(event){
var $filter = $(this).children('span').clone();
$filter.appendTo('#filter-selected > ul').wrap('<li class="filtering"></li>');
});
$(.filtering').click(function(){
$(this).remove();
});
Since the elements are created dynamically, You need event delegation
$('#filter-selected').on('click', '.filtering', function(){
$(this).remove();
});
You are missing string quote on left side ' of .filtering which might be a problem.
$(.filtering').click(function(){

dynamically assign text to <a> from <li>

Using jquery 1.8.3
I am creating a function which creates an "li" element and sets some properties, including establishing an event listener.
$(this).closest('a').text(text); //$(this) is the li tag, and it does show that in the browser if you step through
The dom structure looks like this:
<div>
<a></a>
<div>
<ul>...</ul>
</div>
</div>
If you follow it in the debugger, both the .text() method and "text" variable are being populated with the correct info. There is something going on with the assignment part that I can't track. I am sure it is something stupid and obvious I am missing, but I could use some help getting over this hump.
If you need more info, please let me know.
The anchor tag is not the ancestor of the li .. Rather it is a sibling of the div in which it is encased..
You are looking for this I belive
$(this).closest('div').prev('a').text(text);
You have to use html() function from jQuery:
$(document).ready(function(){
$("#element li ").click(function(){
$("#linki").html($(this).html());
});
});
<a href="" id="linki" ></a>
<a></a>
<div>
<ul id="element">
<li>Hello</li>
</ul>
</div>
live example http://jsbin.com/opoqid/46/edit

javascript doesn't work with LI tag

hi i have this code
html code
<ul>
<input type="button" onclick="appear()"/>
<li id="addQuestionChoices">roma</li>
</ul>
css code
#addQuestionChoices{display:none;}
javascript code
function appear()
{document.getElementById('addQuestionChoices').style.display="block";}
but when i press the button , nothing happend, is javascript doesn't work with LI tag ? or what ?
thank you for answering
The <li> tag must be inside an <ul> or <ol>, and the only allowed children for <ul> and <ol> are <li> tags. This means your <input> should be outside the <ul>:
<input type="button" onclick="appear()"/>
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
just be sure to define the function before, like in this fiddle: http://jsfiddle.net/2dUfa/
<script>
function appear() {
document.getElementById('addQuestionChoices').style.display= "block";
}
</script>
<input type="button" onclick="appear()" value="appear" />
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
As a sidenote: the default display property of a <li> element is list-item (and not block)
It's bad practice to embed JavaScript calls within HTML. It makes the code much more maintainable when the functionality, style and markup are kept seperate. Secondly your <li> element should be nested within either a pair of <ul> or <ol> tags.
I have written a jsFiddle example of how you could tackle this task:
http://jsfiddle.net/dLqja/1/
In this code I have created a 'click' listener, this is attached to your button via its id. Upon the button press it triggers an anonymous callback function which dynamically changes the display style of your 'li' element.
Inclusion of jQuery
Make the following is the first JavaScript that you include in your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
This jQuery script is hosted by Google, which has its advantages such as (it's probably already cached in the clients browser from visiting a previous website using it).
Any JavaScript code which you write which uses the functionality of jQuery should be included after the above script.
None jQuery Version...
You can achieve a similar result as the above by assigning an event listener to the button. This approach is preferable to using onclick="..." as sticks to the rule of seperating functionality from markup. If none of these answers work you should check your browsers console for error messages.
http://jsfiddle.net/SvufY/1/
Try putting the <li> inside of a <ol> or <ul> tag.
You should avoid using inline Javascript code, and instead focus on keeping it separated. Attach your event handler to the object in a script tag (or, better yet, a script file loaded at the end of the document), something like this:
<input id="clickButton" type="button" value="submit" />
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
<script>
document.getElementById('clickButton').onclick = function() {
document.getElementById('addQuestionChoices').style.display="block"
};
</script>
You can see a working example of this at http://jsfiddle.net/xxgdB/
Note also you can use either list-item or inherit in the display field to achieve the same effect.

How do I target a jquery click function where identical links exist (ie within a php foreach)?

Similar to what Facebook does on its newsfeed, I want to allow commenting on numerous feed items, which I'm pulling via a php foreach statement. This is creating identical classes. So when I click .show_comments it activates everything.
I went through SO and found something akin to what you see below...but it's not working for me.
How do I target individual .show_comments to animate and toggle the selected item?
$j(function() {
$j(this).find('.show_comments').click(function(){
$j(this).find('.comments').slideDown("fast");
$j(this).find(".answer_comments").toggle();
});
$j(this).find('.hide_comments').click(function(){
$j(this).find('.comments').slideUp("fast");
$j(this).find(".answer_comments").toggle();
});
});
IDs should be unique in a HTML document. If you have several elements with id="show_comments" you are doing it wrong and you won't be able to access more than 1 of them through Javascript. The proper way of grouping elements is by classes.
The right way of doing it would then be something like this, assuming the HTML looks like the following:
<div id="item-1">
....text of whatever people are commenting on....
<a href='#' class='toggle_comments'>show comments</a>
<div class='comments' style='display: none;'>
... comments ...
</div>
</div>
<div id="item-2">
....text of whatever people are commenting on....
<a href='#' class='toggle_comments'>show comments</a>
<div class='comments' style='display: none;'>
... comments ...
</div>
</div>
And the Javascript/jQuery would then be:
$('a.toggle_comments').toggle(function() {
$(this).next('div.comments').slideDown('fast');
$(this).text('hide comments');
}, function() {
$(this).next('div.comments').slideUp('fast');
$(this).text('show comments');
});
And here is a demo of it in action.
#show_comments is an id and ids need to be unique.
when you generate the names/ sections, use something like
id='show_comments1'
and
id='answer_comments1'
to uniquely identify both sections
OR, traverse up the tree from element raising the event to a known parent and then find the answer child and toggle() it

Categories