Image anchor click is not working in IE7? - javascript

I have below image anchor inside a form. Form id is myForm. On click i will call some database call and i have below html code and jquery code.
<a id="new"><img src="image.gif"></a>
jQuery code:
$('#myForm #new').click(function() {
alert("new byutttton clickeddddd");
});
But it is not alerting. Am I doing anything wrong here? It works fine in FF.

"<img src="image.gif">"
I think you are missing href tag use like this

IE7 most likely required an href attribute on the element. You may want to use a different element other than an anchor for this functionality. you also only need one ID for the selector as they should be unique.
Try
<a id="new" href="#"><img src="image.gif"></a>
$('#new').click(function(event) {
event.preventDefault();
alert("new byutttton clickeddddd");
});

I would switch to the 'on' jQuery event
HTML
<img src="/" alt="my image" />
jQuery
$("#new").on("click", function(event){
event.preventDefault();
alert("new byutttton clickeddddd");
});
Remove #myForm. You are overqualifying the selector as well. But that's not a big deal I suppose.

Related

Click on Anchor tag is not working

Click on Anchor tag is not working..Here is my code:
$('#selectall').onclick(function () {
console.log("Hello");
});
<li>
<a class="selectall" id="selectall">
<i class="fa fa-square-o"></i> Select All
</a>
</li>
Try the click event!
the problem is that "onclick" isn't supposed to used this way. You can either do
$('#selectall').click(function ....)
or
$('#selectall').on('click', function ....)
a
$('#selectall').onclick(function ... )
does not exist for jQuery. 'onclick' is by default a javascript function.
$('#selectall').click(function () {
alert("Hello");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a class="selectall" id="selectall"><i class="fa fa-square-o"></i> Select All</a></li>
you are using jquery it seems, so instead of onclick you should use click
just apply
<a href="javascript:void(0)".... >
or
<a href="#".... >
and use method as "click" not "onclick"
Since you also id-ed it with "selectall", the "#" is allright. You do need
$('#selectall').click(function () {
tho.
Also, when is your js executed? If the above js-code is executed BEFORE the html containg the anchor tag is rendered, it will fail, because there is nothing yet to bind it to.
I assume the $ is jQuery so use .click() not .onclick()
otherwise, the vanillaJS code is
document.getElementById('selectall').addEventListener('click',function(){
console.log('hello');
},false);
I always use delegate events, so a.selectall elements can be added/removed dynamically w/out messing up your click listener.
$("body").on("click", ".selectall", function(evt){
//click handler code here
});

jQuery script for image change, not working

I want to change src of in img, I coded as below, but it's not working, what's wrong?
<img id='logo_image'/>
<span onclick='$(logo_image).attr("src", "images/logo_orange.png");'>click me</span>
It might be the problem with your selector.
If it is id use $('#logo_image')
If it is class use $('.logo_image')
First up you're trying to use a variable logo_image when you should be using a string starting with # to indicate you want to select by id:
onclick='$("#logo_image").attr("src", "images/logo_orange.png");'
Secondly, it would be better not to use an inline onclick attribute if you can help it:
<img id='logo_image'/>
<span>click me</span>
<script>
$("span").click(function() {
$("#logo_image").attr("src", "images/logo_orange.png");
});
</script>
...where ideally the span element would have some id or something to select it by.
Thirdly, don't make span elements clickable in the first place unless you don't care about making your page accessible to people who can't (or who choose not to) use a mouse or other pointing device. Better to use an anchor (which you can style as you see fit) so that the user can tab to it and activate it with the keyboard:
<img id='logo_image'/>
click me
<script>
$("a").click(function(e) {
e.preventDefault();
$("#logo_image").attr("src", "images/logo_orange.png");
});
</script>
The problem with your code is you aren't probably setting the object to logo_image variable.
I suggest changing it to:
<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>click me</span>
logo-_image should be the id of that image.
Since you want refer to the name of the id, you have to wrap the logo_image in quotes, otherwise Javascript will treat it as variable.
$('#logo_image')
You have to use something like this:
<img id="logo_image" src="" />
<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>
click me
</span>
if you have an img with a id named logo_image
if your img has the css class logo_image you have to write:
<img class="logo_image" src="" />
<span onclick='$(".logo_image").attr("src", "images/logo_orange.png");'>
click me
</span>
Make sure u use the right quotes in the javascript part.
Also use $('#logo_image') selector to get the image by id.
I made a jsfiddle for you to demonstrate:
http://jsfiddle.net/9Ltfa/
<span onclick="$('#logo_image').attr('src', 'images/logo_orange.png');">click me</span>
As you have specified the image as an id, you will need to reference the image via the following code:
$('#logo_image')

Dynamically load link in rel attribute.

I want to dynamically load content using jquery's .load() function. Im storing the links in the .rel attribute of the links. I've got it setup like this:
<script>
$(document).ready(function(){
$('.sidebar_link').click(function(){
var link = this.attr('rel');
event.preventDefault();
$('#content').empty();
$('#content').load(link '#content');
});
});
</script>
<div class="main_menu">
<a class="sidebar_link" href="#" rel="photos.htm">Photography</a>
<a class="sidebar_link" href="#" rel="furniture.htm">Furniture</a>
<a class="sidebar_link" href="#" rel="services.htm">Services</a>
</div>
</div>
Its not working - It doesn't seem to be grabbing the link out of the rel attribute and Im not sure why. Any ideas?
Try this:
var link = $(this).attr('rel');
.attr is not a native JavaScript function, it is from jQuery so you have to wrap this with jQuery
And this:
$('#content').load(link);
You can pass an id for loading fragments, however the url and the id need to be a string literal like so $('#content').load('photos.htm #content') The photos.htm page would need to have an element on the page with id content. If you just want to display the entire contents of the page, just use the url.
In your click handler this is a pure dom element; you need to call the jQuery function on it before accessing the rel attribue
$('#content').load($(this).attr("rel"));
$('#content').load(link '#content');
This is almost certainly throwing a syntax error -- check your JavaScript console. I think you just want .load(link);.

Why doesn't a href link work while an onClick link does?

In my jquery slider here, I am trying to wrap the images in tags with href links. They are unresponsive. However, onclick="javascript:self.location.href='http://hodaradesign.com/'; return false;" works fine. Why is that?
Doesn't work:
<img id="book2" class="book" src="book2.png" />
Works:
<img id="book3" class="book" src="book3.png" onclick="javascript:self.location.href='http://hodaradesign.com/'; return false;" />
Live demo:
http://www.freewaycreative.com/jsfun/fiddle.html
Any ideas?
Because your slider doesn't know or care about the <a...> element, it's only looking at elements with the class set to book!
Try this:
<a class="book" href="http://hodaradesign.com">
<img id="book2" src="book2.png" />
</a>
well this looks somewhat like spaghetti code.
you dont need the javascript: handler in an onclick event as its already a javascript event. furthermore the return false in the onclick event will prevent the link from beeing followed if javascript is enabled and executed correctly.
something like this or some other listener is probably your problem.
you specified the href attribute on the <img> tag instead of the <a> tag.
it should be:
<img id="book2" class="book" src="book2.png" />
if you return false in a onlckick event handler, the event es bing prevented from being executed. in this case opening the link.

jQuery problem, jQuery takes over all links on page

<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("#results").load( "jquery-routing.php", { pageNo: $(this).text(), sortBy: $("#sortBy").val()} );
return false;
});
});
</script>
<div id="results"> </div>
1
2
that code works fine, only problem that after I run it all my a href links stop to work! The links become jquery ajax calls.. why?
You're $("a") selector matches all <a ...> tags, you need to change it to something more specific:
$("a#someid")
$("a.someclass")
$("div#somecontainer a")
To target specific links, use the id or class tag on your anchor tags.
E.g.
<a class="link1" href=""></a>
<a id="link2" href-""></a>
Do note that id tags are unique within a page and can only be used once.
Reference those links in jQuery using:
$('a.link1').click(function() {}
$('#link2').click(function() {}
or you can combine both:
$('a.link1, #link2').click(function() {}
What you need to do is assign an id or class tag to the link that will call the ajax request. E.g. <a class="ajax" href="">ajax</a> and referencing it with $('a.ajax').click(function () {}
Your setting the onclick event of all anchor tags on the page. Try only selecting the link that you want instead of the more general $("a")
Your selector $("a") indicates all the hiperlink in your page.
You may need to give a specific id to the hiperlink where you want your ajax call to work and then change the selector based on that.
ex:
<a id= "my-link" href="" >ddd</a>
$("a#my-link").click()

Categories