I have following html code. In my page there are many tag which have class='posta' but what i want assign onclick event only to which have post attribute.
<ul class="posts_li">
<li>
Post
</li>
<li>
Act
</li>
<li>
Event
</li>
<li>
Create News
</li>
</ul>
My Jquery Code for assigning an event is here
$(".posta").click(function(){
alert("here");
if($(this).attr("post")){
alert($(this).attr("post"));
}
});
$(".posta[post]").click(....);
Fiddle: http://jsfiddle.net/maniator/LmrPR/
Then use [attribute=value] in the selector:
Example
$('.posts_li').on('click', '.posta[post]', function() {
alert($(this).attr("post"));
return false;
});
Additionally, you can avoid placing an event handler for each item by delegating them to the parent. In this example, I placed a single handler on the <ul> for all child elements using the .on() method (jQuery 1.7+). For older jQuery (1.4.2+), .delegate() is also available.
Use can use attribute selectors [propertyname] to select only nodes that have that property.
$(".posta[post]").click(function(){ ... });
You can do this with the css/jquery attribute selector:
$(".posta[post]").click(......... your code here)
Here's the example:
http://jsfiddle.net/wHvkF/
I would accomplish it using:
See this working Fiddle example. the last from the list doesn't alert
$(".posta[post]").click(function(e) {
e.preventDefault();
alert("here");
});
Works since version 1.0 of jQuery.
Related
Trying to build a dropdown menu. The idea is to add class to parent and child on parent hover, and remove added class when mouse is out of both.
This is html
<ul>
<li class="menuitem"></li>
<li class="menuitem">
<ul></ul>
</li>
<li class="menuitem"></li>
</ul>
And this is jquery
$(".menuitem").each(function(){
$(this).hover(function(){
$(this).addClass("visible");
$(this).find("ul").addClass("visible");
});
});
$(".visible").each(function(){
$(this).mouseout(function(){
$(this).removeClass("visible");
});
});
The event handlers are bound to elements that match at the time of binding. Adding a class later doesn't make the event handler work for that class.
What you seem to be looking for, is just toggleClass
$(".menuitem").hover(function(){
$(this).find('ul').addBack().toggleClass("visible");
});
FIDDLE
hover() actually incorporates 2 events ... mouseenter and mouseleave. If you only provide one callback argument it gets used for both events.
If you provide 2 callbacks the first is for enter and the second is for leaving so you can do:
function enterEl(){
$(this).addClass('visible').find('ul').addClass('visible');
}
function leaveEl(){
$(this).removeClass('visible').find('ul').removeClass('visible')
}
$(".menuitem").hover(enterEl, leaveEl);
This is more verbose than using toggle methods but is to point out that you can do different things in the two event handlers.
This is also the same thing as doing
$(".menuitem")
.mouseenter(enterEl)
.mouseleave(leaveEl);
How to use jQuery to click the span tab like below?
like this:
<span data-bind="event: {click: toggleshow}, css: {open: more()}" class="">
Expand<span></span>Search</span>
You can add a css class to your span and use the css class as your jQuery selector for registring the click event
<span class="myspan" id="someId">Test</span>
<span class="myspan" id="someOtherId">Test Again</span>
And the jQuery code will be
$(function(){
$("span.myspan").click(function(e){
alert("clicked");
var itemId=$(this).attr("id");
alert(itemId);
});
});
Here is a working sample
If you cannot add a css class or other attributes to this span, you might need to use a very wide jQuery selector, which is just the span tag.
$("span").click(function(e){
alert("clicked");
});
But this click event will be registered to all span's in your page. Another option is to wrap these spans inside a container div and use that in your jQuery selector so that only those span's will be registered for the click event.
<div id="myContainer">
<span data-bind="event: {click: toggleshow}, css: {open: more()}" class="">
Expand<span></span>Search</span>
</div>
And the jQuery code to register the click event will be
$(function(){
$("#myContainer span").click(function(e){
alert("clicked");
});
});
Here is a working sample of that.
jQuery can take pretty much any CSS selector.
So if you don't want to use a class or an id (which you should), there are 2 options:
Read up about CSS selectors and find an appropriate one.
Open
the inspector tools in your browser, right click on your span
element in the HTML view and choose the option "Copy Unique
Selector" (Firefox) or "Copy > Copy selector" (Chrome) to get an
automatically generated selector for your element.
Then use it normally with jQuery: $("copy_pasted_probably_very_long_selector").click()
1st: in html use
</span><span>Search</span>
instead of
<span></span>Search</span>
2nd: while you tagged javascript/Jquery for click event so you can use .filter()
$('span').filter(function(){
return $(this).text().trim() == 'Expand';
}).on('click' , function(){
//code here for Expand span
});
Working Demo This will work with Expand span .. use the same way for Search one
You can use the event object to find the nodeType .Here is a snippet to illustrate it
HTML
<span class="item-content">Button 1 </span>
<span class="item-content">Button 2 </span>
<div class="item-content">Button 3 </div>
<button class="item-content">Button 4 </button>
JS
$('body').on('click',function(event){
alert(event.target.nodeName)
})
event object have many other keys which can also come handy when required.You can just console.log(event) so see others keys.
WORKING MODEL
NOTE: I used multiple tags just for demonstration. Also though each element have a class but I used it just for styling.
Hope this will be useful
it removes the class but it doesn't add the class, i can't use .click() function it needs to be onclick=""
<li class="selected">Click me</li>
<li>Click me</li>
function myfunction(a,b,c){
$('ul li.selected').removeClass('selected').addClass('none');
$(this).closest('li').addClass('selected');
}
You are already using jQuery, so just use jQuery to handle all your events.
Add this code;
$(function(){
// bind click event to your <a> tags
$('a').click(function(e){
// prevent the default behaviour of your links
e.preventDefault();
// remove the class from all li's
$('li').removeClass('selected');
// add selected to the clicked a's parent li
$(this).parent('li').addClass('selected');
});
});
Then keep your html clean from JavaScript
<li class="selected">
Click me
</li>
<li>
Click me
</li>
p.s.
If you are wanting to put PHP in, then you could put things in like;
// check out my 1337 php coding skillz!
Click Me
Then access it in your jQuery using
$(this).data('foobar');
pps
Sorry my php coding skills are rubbish!
I've been struggling with this for an hour now, and I can't solve it. I'm new to use this on javascript, but this is really simple, and it's just not working.
Here's the HTML
<ul class="nav pull-right nav-tabs" id="primarynav">
<li class=" navlink">
About
</li>
<li class="navlink active">
Portfolio
</li>
<li class="navlink">
Contact
</li>
</ul>
And the js
$(document).ready(function(){
$(".navlink").click(function(){
$(".navlink").removeClass("active");
this.addClass("active");
});
});
So it should remove class active from all elements with class navlink, and then add class active to the clicked element. But it doesn't.
http://jsfiddle.net/Tckf7/
Change it to:
$(this).addClass("active");
jsFiddle example
.addClass() is a jQuery method and you had been trying to apply it to a non-jQuery object (this vs $(this)).
this refers to the DOMElement to which jQuery has attached the event. To turn it into a jQuery collection and be able to use jQuery methods like addClass, pass it as an argument to $:
$(this).addClass("active");
Inside functions, the this keyword actually refers to the context of the function. In the case of event handlers, the context is the DOMElement that the handler is attached to.
addClass() is a jQuery method but this is just the direct reference to the DOM object. You need to wrap this into a jQuery object first before you can use a jQuery method on it.
$(document).ready(function(){
$(".navlink").click(function(){
$(".navlink").removeClass("active");
$(this).addClass("active");
});
});
DEMO - Using $(this).addClass() instead of this.addClass()
Edit
To elaborate a little on this. You can never call jQuery's addClass() method on a JavaScript object as addClass() is a jQuery method.
To do the same in pure JavaScript, if you want to just use this, you could use element.className, similar to this:
$(document).ready(function(){
$(".navlink").click(function(){
$(".navlink").removeClass("active");
//$(this).addClass("active");
this.className += " active";
});
});
DEMO - Using this.className example
Though if you are using jQuery already it would make little sense not to use $(this).addClass() instead.
this isn't a jQuery object, use $(this) instead.
You should use $(this)
$(document).ready(function(){
$(".navlink").click(function(){
$(".navlink").removeClass("active");
$(this).addClass("active");
});
});
http://jsfiddle.net/Tckf7/2/
I have a list with links:
<li class="link-1">One</li>
<li class="link-2">Two</li>
<li class="link-3">Three</li>
..
user clicks on any link, then with jQuery I want to display the content of the link.. somthing like:
$(".link-??? a").click(function() {
alert($(".link-??? a").html());
})
something like this. I am not going to create X function (as the number of the links), so what can I do? I should replace the ??? in somtehing else..
You could do:
$('li[class^="link"] a').click(...
However this would only work if the li have only one class or if the link-X class is the first in the list.
Inside the handler you can use $(this) to refer to the a element:
alert($(this).text());
Much better would be to give the li elements a common class:
<li class="link">One</li>
<li class="link">Two</li>
<li class="link">Three</li>
$('.link a').click(... will be much more reliable.
Give each element the same class. Then in your javascript reference this within your function. Check out the link below to see a working example
http://jsfiddle.net/kprgr/2/
<li class="link">One</li>
<li class="link">Two</li>
<li class="link">Three</li>
$(".link").click(function() {
alert($(this).find("a").html());
});
Try..
$(".link-??? a").click(function() {
alert(this.innerHTML);
})
Inside the click event, this should refer to the element that was clicked.
You could also do..
alert($(this).html());
..but the first way is simpler, and faster.