I'm creating a twitter-like app as a learning exercise and have the following at the beginning of my JS file:
$(function(){
setInterval(update, 3000);
$('.tweet li a.username').on('click', function() {
alert('hey!');
});
$('.showMore').on('click', function() {
moreIndex += 5;
update();
})
});
The alert() is filler for another function that I want to fire when the username is clicked. My generator is creating the following HTML for each tweet:
<ul class="tweets">
<ul class="tweet">
<li><a class="username" href="#">#jason:</a> tweet text </li><li class="date"> Date </li>
</ul>
</ul>
This is contained in a div with the class tweetDiv.
I've tried many selectors but am unable to get the alert to fire. Is my selector incorrect? Or is it something else?
It is something else. Your selector looks correct.
Most probably your code generates new tweets that don't have bound events. You should better use event delegation to fix that:
$('.tweets').on('click', '.tweet li a.username', function() {
alert('hey!');
});
Here .tweets element is supposed to be static and not regenerated dynamically.
First of all you need to make the wrapper function a self invoking function.
Moreover as you are binding a click even on 'a' tag hence you need to prevent its default behaviour.
Please refer to the fiddle
JS
(function () {
//setInterval(update, 3000);
$('.tweet li a.username').on('click', function (e) {
e.preventDefault();
alert('hey!');
});
$('.showMore').on('click', function () {
moreIndex += 5;
update();
})
})();
HTML
<ul class="tweets">
<ul class="tweet">
<li><a class="username" href="#">#jason:</a> tweet text</li>
<li class="date">Date</li>
</ul>
</ul>
Related
can anyone please help?
I have a HTML code like this.
<ul class="nav navbar-nav navbar-left">
<li>
<img src="img/topbararrowback.png" alt="">
</li>
<li id="hide_filter">
Hide Filter
</li>
</ul>
I try to add a .click event on li having id hide_filter.
What I have done is-
$("#hide_filter").click(function()
{
alert('message');
});
And -
$(".navbar-left li").click(function() {
alert(this.id); // id of clicked li by directly accessing DOMElement property
alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose
alert($(this).html()); // gets innerHTML of clicked li
alert($(this).text()); // gets text contents of clicked li
});
And -
$('ul.selectedItems li#hide_filter').click(function()
{
//$("p").hide();
alert('message');
});
And -
$('#hide_filter')[0].click(function()
{
//$("p").hide();
alert('message');
});
But nothing works for me.
Thanks in advance for helping..
Actually It works :)
$("#hide_filter").click(function()
{
alert('message');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav navbar-nav navbar-left">
<li>
<img src="img/topbararrowback.png" alt="">
</li>
<li id="hide_filter">
Hide Filter
</li>
</ul>
Assuming you have added the jquery library, You need to attach the event when DOM is loaded.i.e. on DOM ready event:
$(function(){//document ready function
$("#hide_filter").click(function(){
alert('message');
});
});
Working Demo
Maybe your code is not eval.
Try put your code in body tag with function wrap like this
$(function(){ //document ready function
$("#hide_filter").on("click",function(){
console.log('message');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Remove .selectedItems selector from your 3rd option
$('ul li#hide_filter').click(function()
{
//$("p").hide();
alert('message');
});
Remove index 0 from your 4th option
$('#hide_filter').click(function()
{
//$("p").hide();
alert('message');
});
Otherwise your 4 options are correct and will work fine. Kindly make sure you have written these codes inside ready event.
$(document).ready(function(){
$("#hide_filter").click(function()
{
alert('message');
});
});
Maybe there is a problem with jquery libraries. Are they in conflict with other javascripts?
When user click on ABC, it should go to abc.php. But it wont. If I return true as follows in jquery code, it wont work the slide down when click on Sub. Please give me a solution.
<script type="text/javascript">
$js(document).ready(function() {
//Class 'contentContainer' refers to 'li' that has child with it.
//By default the child ul of 'contentContainer' will be set to 'display:none'
$js("#treeMenu li").toggle(
function() { // START FIRST CLICK FUNCTION
$js(this).children('ul').slideDown()
if ($js(this).hasClass('contentContainer')) {
$js(this).removeClass('contentContainer').addClass('contentViewing');
}
}, // END FIRST CLICK FUNCTION
function() { // START SECOND CLICK FUNCTION
$js(this).children('ul').slideUp()
if ($js(this).hasClass('contentViewing')) {
$js(this).removeClass('contentViewing').addClass('contentContainer');
}
} // END SECOND CLICK FUNCTIOn
//return true; If used this, slide down is not working
); // END TOGGLE FUNCTION
}); // END DOCUMENT READY
</script>
html as follows
<div id="left_menu">
<h2 style="text-align: center;margin-bottom: 0px;color: #000000">Our Ministry</h2>
<ul id="treeMenu">
<li>ABC</li>
<li>DEF</li>
<li>GHI</li>
<li class="contentContainer">Sub
<ul>
<li>JKL</li>
<li>MNO</li>
<li>PQR</li>
<li>STU</li>
</ul>
</li>
</ul>
</div>
Seems like you can simplify like so:
http://jsfiddle.net/isherwood/8s923/3
<li class="parent contentContainer">Sub
$(document).ready(function () {
$("#treeMenu li.parent > a").click(function (e) { // START FIRST CLICK FUNCTION
e.preventDefault();
$(this).closest('li').toggleClass('contentContainer contentViewing')
.children('ul').slideToggle();
}); // END TOGGLE FUNCTION
}); // END DOCUMENT READY
The solution is to only apply preventDefault to the specific anchors that operate the dropdown menu by giving them a class that isn't toggled.
Don't forget to reapply your alias.
I'm new to javascript and I wanted to create an event onclick to list items. The problem is that I want to create an event to the li tag, but it keeps firing when I click the descendent ul's.
Here goes part of my code:
<li id="1660761" class="HTMLFirstLevel HTMLHorizontalArrowDown">
<ul id="ul1223945" class="HTMLItem">
<li id="1490659" class="HTMLRemainingLevels"></li>
<li id="483463" class="HTMLRemainingLevels"></li>
<li id="80919" class="HTMLRemainingLevels"></li>
<li id="1280053" class="HTMLRemainingLevels"></li>
<li id="1799353" class="HTMLRemainingLevels"></li>
<li id="1882209" class="HTMLRemainingLevels"></li>
<li id="462917" class="HTMLRemainingLevels"></li>
</ul>
</li>
<li id= ......>
<ul....>
<ul...>
</li>
and my javascript:
var parentNode = document.getElementById('1660761');
parentNode.addEventListener("click",function(e) {
alert('Hi There');
});
}
Now I only want it to fire on the item li with the id 1660761, and not the items inside the list.
The list is an imported component and I can't create events inside the html, that's why I'm accessing it outside with javascript.
Now here's how I've done it by scaning the div by tag name and then adding a "click" event listener if the content equals the tag inner html that I was searching for.
I leave the rest of the html that it's important to this aproach:
<div id="MainMenu" class="HTMLMenuContainer HTMLMenuHorizontal">
<ul id="ul1351387" class="HTMLMenu">
<li id="1660761" class="HTMLFirstLevel HTMLHorizontalArrowDown">
<a href="#">
<span>Back Office</span>
</a>
<ul id="ul1172716" class="HTMLItem">
<li id="1490659" class="HTMLRemainingLevels">
<a href="#">
<span>
Some submenu Here
</span>
</a>
</li>
.....
and the code:
var divs = document.getElementsByClassName('HTMLMenuHorizontal');
var span = divs[0].getElementsByTagName('span');
//I iterate till 19 cause its more than all the spans in the page.
for(var i=0; i<20; i++) {
var sp= span[i];
if(sp.innerHTML==('Back Office')){
sp.addEventListener("click",function back(){
//do something here like
alert('Back Office');
});
}
}
This works fine and it doesn't fire on the itens inside.
This works because in my case the itens doesn't change the content, only the visibility.
I do the same for all the other itens that have descendents.
Thank you all.
Below is my jQuery code for this problem:
$(function(){
$("li.1660761").live("click", onListItemLink);
}
function onListItemLink(){
alert('Hello World!');
}
This one is for JavaScript:
var parentNode = document.getElementById('1660761');
parentNode.onclick = onListItemLink;
function onListItemLink(){
alert('Hello World!');
}
take a look at this page to undersand correctly:
capture event
and what's function(e-->??)
I hope it helps.
$('#1660761').unbind('click').click(function(e) {
if (e.target !== this) return;
alert('Hey There!');
});
Try This code : http://jsfiddle.net/sd5LZ/
I am facing a problem on getting the nearest parent element attribute value using Jquery. Can anyone help me on this. My element structure is as below,
<ul class="Someclass">
<li><span id=3 class="heading"></span>
<ul>
<li>
<ul> <li><span ><button onclick= "redirect()"></button></span</li>
<ul>
</li>
</ul>
</li>
<ul>
<script type="text/javascript">
function redirect() {
alert(....)
}
</script>
In the above code when i click that element having onclick event i want to get the value as 3 in alert() which is in the element having the class heading. The above code is in for loop so it will have more code like this in a same page.
Give this Try
function redirect(elem) {
alert($(elem).closest('.Someclass > li').children('span').attr('id'))
}
Change Markup to this:
<li><span><button onclick= "redirect(this)"></button></span</li>
this will reffer to the current object in DOM
By wrapping elem in $(elem) will convert it to jQuery object then you can traverse to the closest and find span
You can also filter that span with .children('span:first')
Fiddle Example
With your current code, pass the clicked element reference to the function like
<button onclick= "redirect(this)">asdf</button>
then
function redirect(el) {
alert($(el).closest('.Someclass > li').children('span').attr('id'))
}
Demo: Fiddle
Bu a more recommended way will be is to use jQuery event handlers like
<button class="redirect">asdf</button>
then
jQuery(function($){
$('.Someclass .redirect').click(function(){
alert($(this).closest('.Someclass > li').children('span').attr('id'))
})
})
Demo: Fiddle
This should do it.
alert($(this).closest('.heading').attr('id'));
$(".someclass li").click(function(){
$(this).closet('.heading').attr('id');
})
could you pass it on as a parameter to your redirect function? You'd somehow hold that value in a variable in your loop.
I got a solution if you can change the id and class to parent li
Working Demo
More about parent selector
Jquery
function redirect(elem) {
var myid = $(elem).parents(".heading").attr("id");
alert(myid);
}
HTML
<ul class="Someclass">
<li id="3" class="heading">
<ul>
<li>
<ul> <li><span ><button onclick="redirect(this)" id="haha">Go</button></span</li>
<ul>
</li>
</ul>
</li>
<ul>
I am currently working on building a small menu that will change divs based upon which one it clicked. So if one is clicked it will show the div associated with it and hide the others, ect. But I cannot get it to work, nor can I figure out why. Any help would be appreciated. Thanks.
Below is my code. I've clipped out the content as there was a lot of it.
<script type="text/javascript">
$('.mopHeader').click(function() {
$('#raid-progress-mop').show();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.cataHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').show();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.wotlkHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').show();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.tbcHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').show();
$('#raid-progress-vanilla').hide();
});
$('.vanillaHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').show();
});
</script>
<span class="h4">Raid Progress <span class="mopHeader">MoP</span> <span class="cataHeader">Cata</span> <span class="wotlkHeader">WotLK</span> <span class="tbcHeader">TBC</span> <span class="vanillaHeader">WoW</span></span>
<div id="raid-progress-mop">
<ul id="raid-mop">
<li>Content A</li>
</ul>
</div>
<div id="raid-progress-cata">
<ul id="raid-cata">
<li>Content B</li>
</ul>
</div>
<div id="raid-progress-wotlk">
<ul id="raid-wotlk">
<li>Content C</li>
</ul>
</div>
<div id="raid-progress-tbc">
<ul id="raid-tbc">
<li>Content D</li>
</ul>
</div>
<div id="raid-progress-vanilla">
<ul id="raid-vanilla">
<li>Content E</li>
</ul>
</div>
Wrap your code in:
$(function(){ ... });
...which is the short form of:
$(document).ready(function(){ ... });
Cheers
You need to put the script underneath your markup. Either that, or put it inside document.ready callback:
$(document).ready(function() {
// code here
});
The problem is that when the script appears above the markup, it will execute before the HTML is loaded, and so the browser won't yet know about raid-progress-mop, etc.
How about doing that a little more dynamically inside a ready() function :
<script type="text/javascript">
$(function() {
$('[class$="Header"]').on('click', function() {
var myClass = $(this).attr('class').replace('Header', '');
$('[id^="raid-progress"]').hide();
$('#raid-progress-' + myClass).show();
});
});
</script>
jsBin demo
Wrap your code into a ready finction and this code I wrote is all you need:
$(function(){
$('span[class$="Header"]').click(function(){
var classNameSpecific = $(this).attr('class').split('Header')[0];
$('div[id^="raid-progress-"]').hide();
$('#raid-progress-'+classNameSpecific).show();
});
});
Explanation:
$('span[class$="Header"]') = target any span element which class ends with Header
Now just attach a click handler to all that spans.
Than, to hide all your div elements do:
$('div[id^="raid-progress-"]').hide(); = will hide any div which id starts with raid-progress-
and than you just need to target the div that contains the magic word:
$('#raid-progress-'+classNameSpecific).show();
$('.mopHeader') isn't defined yet. wrap your script with $(function(){...})