I am trying to attach a click event to a check box using JavaScript. Shown below is the HTML and JS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="hidden" name="caution_c" value="0">
<input type="checkbox" id="caution_c" name="caution_c" value="1" tabindex="120">
<script type="text/javascript">
var cb = document.getElementById('caution_c');
cb.onclick = function() {
alert(1);
}
</script>
</body>
</html>
The problem is that in IE, the click event does not fire. I have narrowed down the problem location. The issue is that there is a hidden input just before the check box and both these elements have the same name. I'm not sure why this is causing a problem(after all, I'm using getElementById and the hidden element does not even have an id).
Is there a valid reason for this type of behavior (IE only. Works fine in Firefox...as always :( )? Also, is there a good workaround (I could just do document.getElementsByName('caution_c')[1] but I don't want to...)
Internet Explorer gets confused over name and id - it is highly recommended to treat these two attributes as if they were the same.
You can fix it either by 1) ensure that there are no id/name conflicts in your document, or 2) override IE's native getElementById-method.
Read more about it here.
Try using a different event such as onchange or onfocus to see if that solves it. Also I don't think onclick will be fired if a user tabs onto the checkbox, which may or not be how you intend it to work.
I agree, IE is poor in understanding things at html level.
I would rather add the link to button rather than using anchor elements, as IE is having trouble at anchor level with document.getElementById(). Try same at button and will work for other users.
Related
I don't want to use styles from style.css, so I decided to remove style.css from DOM. This work just fine in Firefox and IE8, but not in IE6:
$("LINK[href='http://www.example.com/style.css']").remove();
Any other solution, with jQuery?
Here is example:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("link[href*='style.css']").remove();
});
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">...</div>
</body>
</html>
And here is CSS (style.css):
#content {
background-color:#333;
}
Only in IE #content is still dark. :(
Maybe is jQuery bug?
This is not a bug in jQuery, it is a bug (or possibly, a feature) of the IE rendering engine.
It seems this problem is being caused by the fact that Internet Explorer does not correctly re-render the page after removing the LINK element from the DOM.
In this particular case, the LINK tag is no longer present at the DOM, but IE still displays the CSS that has been loaded into memory.
A workaround / solution for this is to disable the stylesheet using the .disabled property like this:
// following code will disable the first stylesheet
// the actual DOM-reference to the element will not be removed;
// this is particularly useful since this allows you to enable it
// again at a later stage if you'd want to.
document.styleSheets[0].disabled = true;
EDIT in reply to your comment:
Or, if you want to remove it by the href use the following code:
var styleSheets = document.styleSheets;
var href = 'http://yoursite.com/foo/bar/baz.css';
for (var i = 0; i < styleSheets.length; i++) {
if (styleSheets[i].href == href) {
styleSheets[i].disabled = true;
break;
}
}
Perhaps it's something strange IE6 does to URL in the href attribute? Try something like:
$("LINK[href*='style.css']").remove();
(i.e. check whether the href value contains "style.css")
It's just a guess, however. If that doesn't work, I recommend checking the JQuery documentation closely on the subject of attribute selectors and the remove method.
Also keep in mind that it's also not impossible that it's in fact a bug. (IE6 in general causes lots of issues involving JavaScript and DOM manipulation, among other things.)
Topic's quite old, but You can only add ID to your link element, and delete it by element:
$("#id").remove();
Maybe using lowercase on the tag name?
I use inline Ckeditor to edit content. I want to bind a keypress event to the div i edit. I mean, i need an event that will fire when i change the content of div.
Here is an example of how i do that
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.2/ckeditor.js"></script>
</head>
<body>
<div id="ckediv" contenteditable="true">Editing with CKEDITOR</div>
<br>
<script type='text/javascript'>
$( "#ckediv" ).keypress(function() {
alert('cke key pressed');
});
</script>
</body>
</html>
The problem is that keypress is not fired in ie and chrome when i press enter ordelete keys. If i make a div with contenteditable="true" but without Ckeditor then the event works well.
Here is a jsfiddle with code that shows how it works now http://jsfiddle.net/uAc7c/4/ .I don't know why, but for some reason this jsfiddle(keypress event) doesn't work in ie. When i tested locally with above source, it worked.
And here is a jsfiddle without Ckeditor that shows how it should work http://jsfiddle.net/mPM4J/4/
JQuery Documentation says:
Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.
So i guess IE and Chrome are two of the unsupported browsers.
Therefore try using the keyup event instead like this:
$( "#ckediv" ).keyup(function() {
alert('cke key pressed');
});
For more info, see here:
KeyUp Documentation in the JQuery API
This code is the core of a much larger script that works great in almost all browsers. Yet it didn't work in IE. So I've stripped it down and found that the image.onload isn't firing in IE.
I've done some research, and I've guarded against it being an image caching problem. For one, the error occurs first time round before anything is cached, and, more importantly, the onload event is attached before the src.
I'm also reasonably sure I'm attaching the onload event in an IE compatible manner, so what gives, why don't I get an alert?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function generate(){
var imageGen = document.createElement("img");
imageGen.setAttribute('onload',"primer()");
imageGen.setAttribute('src', "http://www.google.co.uk/images/srpr/logo3w.png");
document.getElementById('image').appendChild(imageGen);
}
function primer() {
alert("here now");
}
</script>
</head>
<body onload="generate()">
<div id="image">
</div>
</body>
</html>
I'm hosting a version here
I only have access to IE8 unfortunately, so I don't know if it persists across other versions, even so it needs to be fixed.
First of all, events are not attributes and must not be set using setAttribute. It might, or might not work.
Second, try creating image object instead of image element:
var imageGen = new Image();
imageGen.src = "http://www.google.co.uk/images/srpr/logo3w.png";
imageGen.onload = primer;
document.getElementById('image').appendChild(imageGen);
Live test case - worked fine for me on IE9 and IE9 compatibility mode which should be like IE8.
Can you try imageGen.onload = primer instead of imageGen.setAttribute('onload',"primer()"); ?
The following code is throwing two alerts as expected in IE but not in Firefox. Please help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function myFunction(){
alert('myfunc');
document.getElementById('mylabel').click();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<p id='mylabel' onclick="alert('you reached');"></p>
<input type='button' value="Click me" onclick='myFunction();'/>
</BODY>
</HTML>
Firefox only has a click() function for form elements such as buttons. However, you can call the onClick function directly; you can change the line to
document.getElementById('mylabel').onclick();
This works in firefox or IE (but note that it requires that the function actually exists, which you know it does in this example).
Also note that you aren't actually simulating a click on that element (so, for example, if there were other things that such a click would do, such as also act as a click on the container, they won't happen). You're just getting the function that would run on a click, and running it directly. So it's not a solution for all situations where you need to simulate a click.
There's no click method on elements. Are you using any library?
Usually you have to do something like element.fireEvent('click') (prototype, mootools)
or element.click() (jquery)
UPDATE- Similar question: How do I programmatically click on an element in JavaScript?
Looks like an ugly and brittle solution, if I were you I'd just include jQuery and let that handle all the browser quirks.
Because the <p> tag does not have the method click.
This question is related to my last one about jQuery 1.4. They supposedly fixed the bug causing the change handlers not to work in IE, but it is not fully fixed.
I am trying to bind a live change handler to a select element. Most of the time, when I change it, the event handler fires. But if I tab to the element immediately after the page loads, then try to change the value using the keyboard, then tab away from it, the event doesn't fire in IE. This only happens the first time I try to change the value. I noticed this in IE 6, 7, and 8. It does not happen in any other browsers I tried. I am sure it is a bug in jQuery. Does anyone know a simple way around this?
Here is an example page to demonstrate the bug:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>jQuery live change handler test 2</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<select id="test">
<option value="a">a
<option value="b">b
</select>
<script type="text/javascript">
$("#test").live("change", function() {
alert('hi');
});
</script>
</body></html>
For jQuery 1.4 the fix is here:
http://github.com/jquery/jquery/commit/435772e29b4ac4ccfdefbc4045d43f714e153381
For jQuery 1.4.1 the fix is here:
http://github.com/jquery/jquery/commit/942f8f7f75a55a36e6b9745030d3b3c983518aa8
Here is the bug discussion:
http://dev.jquery.com/ticket/5851