I have a simple HTML page that looks like this:
...<div id="main">
Click here!
</div>...
I have a piece of jQuery JavaScript in the header that looks like this:
<script type="text/javascript">
$(document).ready(function() {
DoHello();
});
function DoHello()
{
$("div#main a").text("Click here!");
$("div#main a").attr("onmouseup", "javascript:alert('Hello!');");
}
</script>
When I click the HTML link in FireFox then I get an alert that says 'Hello!'. Why does this not work in IE7/8?
When I look at the (dynamically) build DOM in IE then I can see the onmouseup is present but it is never called. I have tried replacing onmouseup with onclick - same problem...
You shouldn't be using the JavaScript pseudo protocol for anything.
This should work:
function DoHello()
{
$("div#main a")
.text("Click here!")
.mouseup(function(){
alert('Hello!');
});
}
Don't use expando events, use jQuery!
$("div#main a").mouseup(function(){ alert('Hello!') });
instead of adding the onmouseup event like that why dont you just use the jQuery method like so:
$("div#main a").mouseup(function() {
alert("hello");
});
should work :) for more info check out - http://docs.jquery.com/Events/mouseup
You should use the bind function like this:
function DoHello(){
$("div#main a").bind("mouseup", function(e){
alert("Hello!");
});
}
Related
I have seen this question and I have seen this fiddle.
My Fiddle here. It's a simple question. Why doesn't it work?
#html
<input checked="checked" id="article_format_html" name="article[format]" type="radio" value="html">Some meaningful value
<input id="article_format_text" name="article[format]" type="radio" value="text">Another Value
#js
$("input[name='article[format]']:radio").change(alert('hola'));
Edit:
On popular demand I did this:
.change(function(){alert('hola')});
Fiddle.
Result: Doesn't work.
Edit 2: (Why I had the problem)
So, JS-Fiddle wraps your js code in the head of the iframe that is your Result section. For jQuery selectors (or any js that manipulates the DOM) to work properly, it has to be executed *after* the DOM element has been rendered. Hence, wrapping your code on ready and/or just before body closes, is the safest way to ensure that your query selectors don't return undefined.
Use a callback or anonymous function block
You are using jQuery 1.11 (better to use .on syntax)
Demo: http://jsfiddle.net/abhitalks/e5ByP/2/
$("input[name='article[format]']:radio").on("change", function() {
alert('hola');
});
You code is not working because you are not wrapping your jQuery inside document.ready function:
$(document).ready(function()
{
$("input[name='article[format]']:radio").change(function()
{
alert('hola')
});
});
FIDDLE DEMO
The code with .on() should be:
$(document).on('change',"input[name='article[format]']:radio",function(){alert('hola')});
Working fiddle:
http://jsfiddle.net/e5ByP/10/
Wrap that in a anonymous function and DOM ready:
$(function () {
$("input[name='article[format]']:radio").change(function () {
alert('hola')
});
});
Demo:http://jsfiddle.net/e5ByP/6/
That is because you have incorrect change handler syntax. also you need to wrap the code in DOM ready :
$("input[name='article[format]']:radio").change(function(){
alert('hola')
});
Demo
In your code you not wrap handler with .change()
handler is A function to execute each time the event is triggered.
Type: Function( Event eventObject )
Try This :
$("input[name='article[format]']:radio").change(function(){
alert('hola')
});
Working Example
Please use anonymous callback function in change event
$("input[name='article[format]']:radio").change(function(){
alert('hola');
});
Put the code in document ready and try like this. Please see the syntax too
$(function () {
$("input[name='article[format]']:radio").change(function () {
alert('hola')
});
});
put that in side document raedy
like this:
$(document).ready(function () {
$("input[name='article[format]']:radio").change(function(){
alert('hola')
});
});
demo
Use the below code
Always use DOM manipulation and events only after DOM gets fully loaded
$(document).ready(function(){
$("input[name='article[format]']:radio").change(function(){alert('hola')});
});
You forgot the $(document).ready() and also u forgot to write function() in change()
$(document).ready(function(){
$("input[name='article[format]']:radio").change(function(){
alert('hola')
});
});
I'm working on a site with a visualization of inheritance relation.
I try to link each nodebox with specific URLs. The html of Element looks like this:
<g class="node" id="RootNode" transform="translate(0,453.125)">
I used
$('#RootNode').click(function(){//do something}
and also
document.getElementById("RootNode").onclick(){//do something}
Neither of them can find the element, nor setup the onclick function.
Have I misunderstood anything? Any information will be helpful. Thanks.
Make sure your code is in DOM Ready as pointed by rocket-hazmat
.click()
$('#RootNode').click(function(){
//do something
});
document.getElementById("RootNode").onclick = function(){//do something}
.on()
Use event Delegation/
$(document).on("click", "#RootNode", function(){
//do something
});
Try
Wrap Code in Dom Ready
$(document).ready(function(){
$('#RootNode').click(function(){
//do something
});
});
you can try these:
document.getElementById("RootNode").onclick = function(){/*do something*/};
or
$('#RootNode').click(function(){/*do something*/});
or
$(document).on("click", "#RootNode", function(){/*do something*/});
There is a point for the first two method which is, it matters where in your page DOM, you should put them, the whole DOM should be loaded, to be able to find the, which is usually it gets solved if you wrap them in a window.onload or DOMReady event, like:
//in Vanilla JavaScript
window.addEventListener("load", function(){
document.getElementById("RootNode").onclick = function(){/*do something*/};
});
//for jQuery
$(document).ready(function(){
$('#RootNode').click(function(){/*do something*/});
});
$(document).ready(function() {
$("#click").click(function(){
console.log("button clicked");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="click">Click Me</button>
You can try this one:
document.getElementById("RootNode").onclick = function() {
/* do something */
};
<div class="imgtumb"><img src="..."></div>
sometext
<script>
$(document).ready(function() {
$('div.imgtumb img').click(function() {
$('a.imgtarget').click();
});
});
</script>
The link not work (dont open a big image). What i do wrong?
----Edited----
Thank you guys, but .trigger() is not working too. I resolved this problem something like this:
$(document).ready(function() {
$('div.imgtumb img').click(function() {
window.location.href = $('a.imgtarget').attr("href");
});
});
----Edited 2---
Question which explained why .click() is not working with a tag
try this:
<script>
$(document).ready(function() {
$('div.imgtumb img').click(function() {
$('a.imgtarget').trigger('click');
});
});
</script>
the event trigger is the event to make another event to an element
http://api.jquery.com/trigger/
use trigger()
. A call to .trigger() executes the handlers in the same order they would be if the event were triggered naturally by the user:
try this
$('a.imgtarget').trigger('click');
instead of
$('a.imgtarget').click();
try to use this instead of .click()
window.open(
'toBigImg',
'_blank'
);
I cannot get the following simple jQuery to work. I know I am overlooking something, so please help me out. Here is the code at http://jsfiddle.net/Z5waA/. It's a simple click the button, then alert with jQuery.
preventDefault(e); should be e.preventDefault();
code should be like this,
$('#submitResetPass').bind('click', function(e) {
e.preventDefault();
alert("hello");
});
and you need to add jQuery reference.
You had a couple issues. First, the jsFiddle wasn't set for jQuery. Then, your call to preventDefault wasn't correct. It works here: http://jsfiddle.net/jfriend00/v9aVb/.
$('#submitResetPass').bind('click', function(e) {
e.preventDefault();
alert("hello");
});
Use e.preventDefault() instead of preventDefault(e).
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", "")