how do we change onclick function via .attr() in jquery? - javascript

i got this url
<a class="remove_item' rel="4" onclick="javascript:jQuery(#blablabla)" href="javascript:;' >remove</a>
i'm using this simple find and replace
item.find('a.remove_class').attr({
title:'hello',
click:'hello();'
} );
but it seem it's not working. i still not able to replace javascript:jQuery(#blablabla) with another function.

To set onClick you should use something like this $("a").attr("onclick", js);
where js is a string containing your javascript code.

Try attaching the event handler using the below code snippet in your page body:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.remove_item').click(hello);
});
</script>

jQuery has no built-in way to assign event handlers in that way. Use the DOM0 method to set the onclick handler instead:
item.find('a.remove_class').each(function() {
this.onclick = function() {
alert("Clicked!");
};
});
Also, don't put javascript: in you event handler attributes. It's incorrect and only works by coincidence.

Why not just do this.
<script type="text/javascript">
$(document).ready(function() {
$("a.remove_item").click(function() {
alert("You have clicked my <a>!!");
//do other stuff
});
});
</script>

The attr doesn't recognises the onclick attribute, get the html element (.get(0)) and use "raw" functions to extract the onclick attribute.
On Firefox the following works:
$("element").get(0).getAttribute("onclick")
You can remove by using
$("element").get(0).removeAttribute("onclick")
or setting a empty string
$("element").get(0).setAttribute("onclick", "")

Related

change div class,id,.. in every click

I trying to run code to change div id,class,... in every click but I don't
know how this my js code :
<div class="up_vote_bt upvote_hide" title="Delete up vote" onclick="upvoteHide()" id="hideupvote"></div>
<script>
$(document).ready(function() {
$("#upvote").click(function() {
document.getElementById("upvote").setAttribute("class","up_vote_bt upvote_hide");
document.getElementById("upvote").setAttribute("title","delete up vote");
document.getElementById("upvote").setAttribute("onclick","hideupvote()");
document.getElementById("upvote").setAttribute("id","hideupvote");
});
});
</script>
<script>
$(document).ready(function() {
$("#hideupvote").click(function() {
document.getElementById("hideupvote").setAttribute("class","up_vote_bt");
document.getElementById("hideupvote").setAttribute("title","up vote");
document.getElementById("hideupvote").setAttribute("onclick","upvote()");
document.getElementById("hideupvote").setAttribute("id","upvote");
});
});
</script>
if you're using jQuery why not do this?
$(document).ready(function(){
$('#upvote').click(function(){
//$(this) for just this element
if($(this).hasClass('upvote_hide')){
$(this).attr('title','Up vote');
upvote();
}else{
$(this).attr('title','Delete up vote');
hideupvote();
}
$(this).toggleClass('upvote_hide')
});
});
toggleClass() will either add or remove upvote_hide if it doesn't exist or exists.
attr() will alter the attribute much like setAttribute()
For my example there is no need to alter the eventHandlers or in your case setting the attribute onClick to the function. I'ts all done in the jQuery event hander function. So your functions that you're passing to the onclick attribute are called within the function.
When you attach an event handler via jQuery using the
$("#upvote").click(function() { ... });
mechanism, jQuery will directly attach the handler to the elements in the query result set. This means that the handler will be there, whatever the ID changes to in the future.
What you can do is to attach a delegated handler to the document like this.
$(document).on("click", "#upvote", function() { ... });
$(document).on("click", "#hideupvote", function() { ... });
See this article for a deeper explanation
Also, setting the onclick attribute is meaningless in this case and you should remove those lines.
However, changin IDs of elements is not a good practice. An ID should mean a unique identifier for a DOM node, which is not expected to change. I would rather toggle classes here.

How to use the same element into a function which triggers the onclick event

I am using the following coding for the script in external file
function DiableLink(elem){
console.log($(elem).attr('type'));
if($(elem).hasClass('disabled')) {
return false;
}
else {
$(elem).addClass('disabled');
}
}
Used as follow in the html
<a onClick="DiableLink(this);" class="hid" href="somelink.jsp"></a>
I used the same function using ID as follow
$(function(){
$('.hid').click(function(){
var link = $(this);
if(link.hasClass('disabled')) {
return false;
}
else {
link.addClass('disabled');
}
});
});
which is perfectly working (I got it from the stackoverflow).
But i don't know why calling in onclick event doesn't work. Please can anyone help? where i got wrong
You need to keep onclick="" atrribute empty if you are using a event handler instead of a function.
Demo
EDIT: Your solution actually works with JS Bin
I wrote:
I'd call the function inside href:
Click
But it wouldn't work if you want to pass the anchor tag element through href attribute. So this will NOT work:
Click
In this case you have to use the onclick event (inline or in a separate file, as I wrote before).

jQuery get parent id not working

I'm not great with JavaScript/jQuery and am having a lot of trouble with a very basic task. I have an img that, when clicked, should give me the id of the parent div it is within.
This is the markup:
<div id="client-1">
<img src="~/Content/plus.ico" alt="plus" onclick="ButtonExpandClick()" />
</div>
And here is the javascript:
<script type="text/javascript">
function ButtonExpandClick() {
alert($(this).parent().attr("id"));
}
</script>
Clicking the image gives me an alert that says "undefined" but I can clearly see that the div has the id of "client-1" when I inspect the page. I must be missing something simple here. I've also tried using .closest as well as passing this into the function but no luck. Thanks for any help!
Don't use the onclick attribute for events. You're using jQuery, bind the events "properly".
Add a class to the image(s):
<img src="~/Content/plus.ico" alt="plus" class="icon" />
Then bind the event:
$(function(){
$('.icon').click(function(){
alert($(this).parent().attr("id"));
});
});
If you hook up the click event using jQuery instead of doing it inline, then you'll get the this passed in automatically:
Note that you'd have to give the image an id or find another selector for it.
jQuery(document).ready(function() {
jQuery("#myImg").click(ButtonExpandClick);
});
You need to pass in this
onclick="ButtonExpandClick(this)"
JS
function ButtonExpandClick(elem) {
alert($(elem).parent().attr("id"));
}
Also it is a bad idea to declare inline events . Attach the event directly using javascript.
<script>
$(function() {
$('#client-1 img').click(function() {
alert($(this).parent().attr("id"));
});
});
</script>
You have to use jquery.click or send your element with function. like sendme(this).
Simpler still you might try this with a binding:
<div id="client-1">
<img src="~/Content/plus.ico" alt="plus" />
</div>
<script>
$(function() {
$('img').on('click', function(){
// Two ways to do the same thing
alert(this.parentNode.id);
alert($(this).parent()[0].id);
});
});
</script>
You can use something like this:
$(function() {
$('img').on('click', function(e) {
var id = this.parentNode.id; //Using javascript to access id is faster.
alert(id);
});
});
Example working at Jsfiddle
It's recommended put this images inside a container. and change this to. It's better for performance.
$(function() {
var images = $('#container').find('img');
images.on('click', function(e) {
var id = this.parentNode.id; //Using javascript to access id is faster.
alert(id);
});
});

.replace in JavaScript/jQuery

I am using .replace method to replace onclick function on anchor tag but it is not working.
<script type="text/javascript">
$(function(){
var htm= $('.jitu').html();
htm.replace("show()",'showme()');
})
</script>
<div class="jitu">me </div>
You should use :-
$('.jitu a').attr('onclick','showme()');
http://jsfiddle.net/Fxfvn/
Explanation on your code:-
What you are doing is just replacing a string not the real DOM. ALso this is not an ideal way to change an attribute. here html is just an html string and no reference...
var htm= $('.jitu').html();
htm.replace("show()",'showme()');
Since you are using jquery. You can directly bind
$('.jitu a').removeAttr('onclick').click(showme); //(if you have onclick. to avoid duplicate alert)
else
$('.jitu a').click(showme);
Use the .attr( attributeName, value ) function instead.
Another approach:
$('.jitu').find('[onclick="show()"]').attr('onclick', 'showme()');
http://jsfiddle.net/CfpBP/
However you should consider using more unobtrusive way to bind events. For example:
$('.jitu a').click(showme);
Just doing a string replacement doesn't do anything if you're not applying the final value to the element; this would work but I would not recommend it:
var $jitu = $('.jitu');
$jitu.html($jitu.html().replace('show()', 'showme()'));
The more correct way is to unhook the old onclick and replace it with a new click handler:
$('.jitu > a')
.prop('onclick', null)
.on('click', showme);
Demo
It would be even better if you didn't even have the inline onclick="show()" in the first place and just use $(element).on(event, fn) to register your click handlers.
This should do the trick:
htm.onclick = function() { showme(); };

Replacing an element by using jQuery

I have html output in paging section like this;
<p> <strong class="active">1</strong> 2 3 Next » </p>
Now i need to add attribute "onclick" using jquery. BUt unfortunately "onclick" attribute cannot be set with jquery. At the same time i came up with an idea : taking a single anchor tag (i.e. ) and replace it by a new anchor tag (i.e. ).
How would i do it with jquery? The idea is to post the form while clicking on the paging links.
SOLVED !
Thank you all for your kind responses......I guess there was a minor mistake in my code; as i was looking through the code posted by umesh i noticed "onClick"...yes i was using "onclick" instead of "onClick". Now it has worked in FF and hopefully it will work in IE too.
you can use .replaceWith() like so:
$('a').replaceWith('<a href="javascript:void(0)" onclick="myFunction(2)" />');
Although I'd recommend looking into why it is that makes you can't set onclick attribute using jquery, if you would like to bind a click event, you can use .click()
$('a').click(function(e) {
myFunction(2);
})
Try this in jquery
$('a').click(function(){
myFunction($(this).text());
});
Value of the anchor can be used to pass the value to function myFunction. If Anchor doesn't contain any value, don't do anything.
Working Test code as below:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// Use Proper anchor selector on your page
$("a").each(function(){
var no=$(this).html();
if(!isNaN(parseInt(no))){
$(this).attr("onClick","myFunction("+no+")");
$(this).attr("href","javascript:void(0)");
}
});
});
</script>
</head>
<body>
<p>
<strong class="active">1</strong>&
nbsp;
2
3
Next »
</p>
</body>
</html>
Well making the assumption that you would prefer to use a click handler rather than replace your entire anchor tag, take a look at this. The only thing you need to do is return false in the click event so that the default navigation doesn't occur.
http://jsfiddle.net/2GgK3/
//if any link is clicked
$('a').click( function() {
var clickedLink = $(this).prop('href'); //get its href
console.log(clickedLink); //output to console
return false; //prevent default navigation
});
You also CAN set attributes directly in jQuery. In jQuery 1.7+ use prop. Otherwise use attr.
$('element').prop('href', 'new href value');

Categories

Resources