I would like a jQuery function to know which link was clicked to call it, i.e. I would like the link's id value to be passed to the jQuery function.
Is this possible? If so what is the neatest way to do it.
Sure. Inside the click() event handler you can refer to the element clicked by this.
$("a").click(function() {
alert(this.id);
...
});
or
$("a").click(function() {
alert($(this).attr("id"));
...
});
$("a").click(function() {
var linkid = $(this).attr("id");
// use linkId here
});
Don't forget to cancel default behaviour, or you won't achieve nothing.
$("a").click(function(e) {
e.preventDefault();
var linkid = $(this).attr("id");
//do whatever here
});
$("a").click(function() {
alert($(this).attr("id"));
...
});
i can say this same..
Related
I have an main php that load a php into a div box via a dropdown list.
The loaded php contains a table. There is jquery in it that does an alert on row clicked.
$(document).ready(function() {
$('#newsTable tr').click(function(){
var clickedId = $(this).children('td:first').text();
alert(clickedId);
});
});
But after it is loaded into the div, the script is not firing
use Event delegation to attach event. Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$(document).ready(function() {
$(document).on('click','#newsTable tr',function(){
var clickedId = $(this).children('td:first').text();
alert(clickedId);
});
}); // End
There is something with event delegation. Try using this code :
$('id_Or_Class_container_hold_the_php_data').on('click', 'tr', function(){
var clickedId = $(this).children('td:first').text();
alert(clickedId);
});
replace
(document).ready(function() {
with
$(document).ready(function() {
try this
jQuery(document).ready(function($) {
$('#newsTable tr').click(function(){
var clickedId = $(this).children('td:first').text();
alert(clickedId);
});
});
I think you need to use live query, instead of your click event u can use following.
$('#newsTable tr').on('click',function()
Use below code..i think its working properly.
$(document).ready(function() {
$("#newsTable").on('click','tr',function(){
var clickedId = $(this).children('td:first').text();
alert(clickedId);
});
});
i have my all links on page like this :
Example
But Now I Want All Links With Following OnClick Function like this:
<a onclick="show();" href="http://example.com">Example</a>
can any one tell me jquery or javascript code to add above function to all links on body, thanks
Some answers have suggested to use jQuery's click() function. That's alright as long as you don't expect to add new links dynamically using javascript.
This click handler will bind on the <body> element, and fire whenever a <a> element inside it is clicked. The advantage with this over $('a').click(...) is that all <a> tags don't need to be present on page load:
$(function () {
$('body').on('click', 'a', function (event) {
event.preventDefault();
show();
});
});
Fiddle: http://jsfiddle.net/Lubf6gjw/2/
EDIT: Here's how to do it with pure javascript:
document.querySelector('body')
.addEventListener('click', function (event) {
if(event.target.tagName === 'A') {
event.preventDefault();
show();
}
});
http://jsfiddle.net/pymwsgke/1/
$(function(){
$("a").click(function(){
show();
}
});
If you want to prevent the browser from following the href, you can just add a preventDefault call
$(function(){
$("a").click(function(e){
e.preventDefault();
show();
}
});
Note that this will not actually append the onclick= to the <a> tags. If you want to do that, you can do it this way:
$("a").each(function(){
$(this).attr("onclick", $(this).attr("onclick")+";show();");
});
Using pure Js
function show (event) {
event.preventDefault();
// do somethink
}
var anchors = document.querySelectorAll("a");
for(var a = 0; a < anchors.length; a++) {
anchors[a].addEventListener("click",show,false)
}
I have this code:
HTML:
<ul class="dropdown-menu" role="menu" id="document_dropdown">
<li><a class="notify" href="toSomewhere" id="1">Item1</a></li>
<li><a class="notify" href="toSomewhere" id="2">Item1</a></li>
<li><a class="notify" href="toSomewhere" id="3">Item1</a></li>
<li><a class="notify" href="toSomewhere" id="4">Item1</a></li>
</ul>
JQuery:
$(document).ready(function () {
$('#document_dropdown .notify').click(function(){
var id = $(this).attr("id");
alert(id);
});
});
What I want to achieve is to see which anchor is clicked and return the id of that anchor so that I can use it in another script. So far it doesn't do anything. What might be wrong with my code? Can anyone help me with this? Thank you very much.
The code you have will work fine, although this.id is a more succinct method of retrieving a native property from an element. If you wish to stop the clicking of the link causing the browser to make an HTTP request, you would need to add preventDefault() to your logic.
You cannot return anything from an event handler, so instead if you need to pass information around you would need to either store it in a global variable, or call another function with that value as a parameter.
$('#document_dropdown .notify').click(function(e){
e.preventDefault();
var id = this.id;
alert(id);
doSomething(id);
});
function doSomething(id) {
alert('You clicked #' + id);
}
Example fiddle
you just need to do this :
$(document).ready(function () {
$('#document_dropdown .notify').click(function(){
var id = this.id;
alert(id);
});
});
Thats it.
The event handler cannot return anything. You need to call another script function and pass the ID as as argument.
$(document).ready(function () {
$('#document_dropdown .notify').click(function(evt){
var id = this.id;
alert(id);
anotherScriptFunction(id);
evt.preventDefault();
});
});
You can pass in the event handler like this:
$(document).ready(function () {
$('#document_dropdown .notify').click(function(e){
var id = e.target.id;
alert(id);
});
});
In this way, e.target is the element you have clicked on. You can wrapper it into a jQuery element through $(e.target).
I want to replace content in a web page with content from clicked elements and made the following JQuery:
function clickHandler(id) {
$("#title").html(id.innerText);
}
$("#navigation a[href]").bind("click", this.id, clickHandler);
The only thing that doesn't work is the replacing part. The content is there in the innerText property of the "id" object, but how do I access it? I've tried about every syntax I could think of: id->innerText, id[innerText], id['innerText'], id.innerText and id(╯°□°)╯︵ ┻━┻innerText(╯°□°)╯︵ ┻━┻.
this inside the click handler refers to the clicked element, so you can just get its text using .text()
function clickHandler() {
$("#title").html($(this).text());
}
$("#navigation a[href]").bind("click", clickHandler);
You can use this:
$("#navigation a[href]").on("click", function(){
var linkText = $(this).text();
$("#title").html(linkText);
});
(╯°□°)╯︵ ┻━┻
function clickHandler(event) {
console.log(event.data);
$("#title").html(($("#" + event.data.id).text()));
}
var $obj = $("#navigation a[href]");
$obj.bind("click", {'id': $obj.attr("id")}, clickHandler);
Fiddle
I'm new to Javascript, seems I'm missing something simple here. I just want to return the ID of the button I am clicking but instead I'm getting "undefined."
HTML
<div class="btn-group" id="{{user.get('name')}}">
<button class="btn" id="voteup">^^</button>
<h4>{{user.get('vote')}}</h4>
<button class="btn" id="votedown">vv</button>
</div>
JAVASCRIPT
$(document).ready(".btn").click(function() {
var id = this.id;
alert(id);
)};
Try this
$(document).ready(function() {
$(".btn").click(function() {
alert($(this).attr("id"));
});
});
You mixed up the things. $(document).ready() accepts the handler function which is executed when the DOM tree is fully loaded. The correct solution is:
$(document).ready(function() {
$(".btn").click(function() {
var id = this.id;
alert(id);
});
});
Correct way to bind click listener is
$(function(){
$(document).on("click",".btn",function(e){
alert($(this).prop("id"));
});
});
I think you should try this way:
jQuery(document).ready(function(){
jQuery('.btn').live('click', function(){
var id = jQuery(this).attr('id');
alert(id);
});
});
Try it and tell us if worked or not (:
Ofcourse you have error in your javascript:
$(document).ready(".btn").click(function() { //<----here in doc ready handler
var id = this.id;
alert(id);
)}; //<---------------closing of the handler
this should be changed to this:
$(document).ready(function(){
$(".btn").click(function() {
var id = this.id;
alert(id);
});
});
If you are using jQuery, you can read the id attribute like this:
$(this).attr('id');