In this code have button and anchor with click event.
alert(document.getElementById("btn").click); //not working in safari
alert(document.getElementById("btn1").click); // is working in safari
I want to execute anchor's click event What I do?
<head>
<script type="text/javascript">
function clickMe()
{
alert('My Name is ' + event.srcElement.name);
}
</script>
</head>
<body>
a
<input type="button" href="#" name="btn1" id="btn1" onclick="clickMe()" />
<script>
//document.getElementById("btn").click();
alert(document.getElementById("btn").click);
alert(document.getElementById("btn1").click);
</script>
</body>
Try this way
<!DOCTYPE html>
<html>
<head></head>
<body>
a
<input type="button" href="#" name="btn1" id="btn1" />
<script>
function teste(){
alert('You clicked on an anchor');
}
window.onload = function() {
document.querySelector("#btn").addEventListener("click", teste);
};
</script>
</body>
</html>
Taken from another question Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?
I did some research and it seems that the .click is not suppose to work with 'a' tags because the browser does not suport "fake clicking" with javascript. I mean, you can't "click" an element with javascript. With 'a' tags you can trigger its onClick event but the link won't change colors (to the visited link color, the default is purple in most browsers). So it wouldn't make sense to make the $().click event work with 'a' tags since the act of going to the href attribute is not a part of the onClick event, but hardcoded in the browser.
Safari and Chrome will not allow the link object to have a .click function, because of this behavior. It would appear that IE is less strict.
Related
I am using jQuery and Ajax.
HOME.html
<html>
<head>
<script src="jquery.js"></script>
<script src="javascript.js"></script>
</head>
<body>
<div id="div1"></div>
<button>click</button>
</body>
</html>
javascript.js
$(document).ready(function(){
$('button').click(function(){
alert('Button is clicked');
$("#div1").load("test2.html");
});
$("#b2").click(function(){
$("#div2").hide();
});
});
TEST2.html
<body>
<div id="div2">
some content
<input type="button" id="b2" value="hide" />
</div>
</body>
<head><script src="javascript.js"></script></head>
When I click on button, Ajax loads the content in div. But when I again click on button then it is clicked twice. I know why this click twice happens, because I again load the javascript.js file.
If I can't do that then the hide button is not working because the JavaScript loads before the div2, that's why hide button is not working.
SOLUTION:
There is one solution is that I use the hide button code in test2.html instead of in javascript.js But I don't want to do that.
Beacuse this is a demo in my original code this is very difficult to do that.
Is there another solution to this?
Repeatedly re-loading the JavaScript is a bad idea.
If you just want to handle clicks on buttons that are dynamically added, you can do that using event delegation. Remove javascript.js from test2.html entirely, and hook up your handlers like this (e.g., change javascript.js to the following):
$(document).on("click", "button", function(){
alert('Button is clicked');
$("#div1").load("test2.html");
});
$(document).on("click", "#b2", function(){
$("#div2").hide();
});
That watches for the click event on the document, but only fires the associated handler if the event passed through an element in the bubbling phase that matches the selector in the second argument. When firing the handler, jQuery makes it look a lot like you had the handler actually attached to that element, rather than to document.
There's a lot more in test2.html than there should be. jQuery will only append the bit in the body (and run the script, but we're removing that). test2.html should just be:
<div id="div2">
some content
<input type="button" id="b2" value="hide" />
</div>
Side note: If you're going to replace it on the next click, I'd use $("#div1").empty() rather than $("#div2").hide() so that you actually proactively remove the content you're going to replace later, rather than just hiding it.
Hello Everyone I have this problem that is just bugging me and I cant get it figured out. I looked everywhere and couldnt find an answer.
I have 2 html files and 1 external javascript file....
This is the first html file
<!doctype html>
<head>
<title>.....</title>
<script src="externalJsFile"></script>
</head>
<body>
<input type="button" value="button1" id="button1">
</div>
</body>
<html>
here is my second html file that links to the same external javsascript file
<!doctype html>
<head>
<title>.....</title>
<script src="externalJsFile"></script>
</head>
<body>
<input type="button" value="button2" id="button2">
</div>
</body>
</html>
Here is my external javascript file
window.addEventListener("load", setFunctions, false);
function setFunctions() {
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.addEventListener("click", sayHello, false);
button2.addEventListener("click", sayHello, false);
}
function sayHello() {
alert("hello");
}
When I visit each html page to click the button to see the hello popup box it only works in one of the pages. In the javascript if i switch around the order of the event listeners on the buttons then the popup will only work on the other page now!! someone please help!! Do I need separate external javascript files for each html page when a window event listener is used???
In the first HTML page, button1 is a button and button2 is null.
button1.addEventListener("click", sayHello, false); binds the event handler, then button2.addEventListener("click", sayHello, false); errors. Since there is no more code in the function, this has no noticeable effect unless you are watching the JS console.
In the second HTML page, it is the other way around: button2 is a button and button1 is null.
button1.addEventListener("click", sayHello, false); errors, and it never reaches the next line.
Test to see if (button1) {} and if (button2) {} before binding … and look at your JavaScript error console when you have problems.
I'm a dizzy designer. I can't can't see why this isn't working:
<head>
<script type="text/javascript">
$().ready(function() {
$('#test').trigger("click");
});
</script>
</head>
<body>
<a id="test" href="http://www.dartworks.net" >click here</a>
</body>
what am i doing wrong?
you didn't attach any click event to the <a> tag you just output it as a link
use the window.location.href like this :
$(document).ready(function() {
window.location.href = "http://www.dartworks.net";
});
The trigger method will fire all the event handlers bound to that event. Following the link is default behaviour, not something caused by a DOM event handler.
I am working with Iframes for controlling the elements of iframe by automating it from the parent html file.
I was trying to to click the link defined in iframe.html file from the test.html file using function click() on javascript while loading test.html :
Test.html file :
function handleMainOnload(){
alert("main frame loaded");
var innerFrame = document.getElementById("frame1");
alert("hi-1" + innerFrame.ownerDocument.title);
var innerDocument = frame1.document;
alert("hi" + innerDocument.title);
innerDocument.getElementById("input1").value = "Dynamically Inserted Text";
innerDocument.getElementById("a1").click();
}
<body onload="handleMainOnload();">
<iframe id="frame1" src="iframe.html"/>
iframe.html file :
<a id="a1" href="http://www.google.co.in"> Google.. click</a>
This achor id = a1 automatically get clicked onload of test.html in IE but doesn't work on any browser apart from IE. Please help.
From Javascriptkit.com:
click() - Executes a click on a element as if the user manually clicked on it. In most browsers, click() only works on form INPUT elements that's non "submit" or "reset". It can't be used to simulate a click on a link or form submit button.
I have verified that this is the reason why it's not working for you. Also, I had to change the following line:
var innerDocument = frame1.document;
to
var innerDocument = window.frames["frame1"].document;
Will update with a way to do this in jQuery.
EDIT:
Here's how you do it in jQuery. Essentially you bind a click event and then call click() on the element. This simulates the action since there is no standard way of executing clicks on hyperlinks.
$(document).ready(function() {
$("#frame1").ready(function () { //The function below executes once the iframe has finished loading
alert("iframe loaded");
$('#frame1').contents().find('#a1').click(function() {
alert("Hello");
$('#frame1').attr('src', $('#frame1').contents().find('#a1').attr("href"));
$('#frame1').load();
});
$('#frame1').contents().find('#a1').click();
});
});
Create the event, initialize it and dispatch it on the node.
See https://developer.mozilla.org/en/DOM/element.dispatchEvent for example.
Just remember to call createEvent on the document that has the node you're going to dispatch on.
You can do this without jQuery and without click event handlers on the anchor tags. (Confirmed with IE 9, FF 15, Chrome 23)
The reason it wasn't working (and for JackWilson's edit) is that [in IE at least] innerFrame.document == innerFrame.ownerDocument, so you were not actually looking for the anchor in the iFrame's content document. Use innerFrame.contentDocument instead.
(I haven't confirmed JackWilson's solution for using window.frames[] in browsers other than IE but some browsers may require referencing window.frames[] by index instead of its id. Anybody know for sure?)
Main page: "aclicktest.html":
<!DOCTYPE html>
<html>
<head><title>A click test</title></head>
<body onload="clickIframe();">
<a id="alocal" href="http://stackoverflow.com" target=_blank>Local link</a>
<iframe id='frame1' src="iframeaclicktest.html"></iframe>
<input type='button' value='click local' onclick='clickLocal();'/>
<input type='button' value='click iframe' onclick='clickIframe();'/>
<script type="text/javascript">
function clickLocal(){document.getElementById("alocal").click();}
function clickIframe(){document.getElementById("frame1").contentDocument.getElementById("aiframe").click();}
</script>
</body>
</html>
Iframe page: "iframeaclicktest.html":
<!DOCTYPE html>
<html>
<head><title>A click test IFRAME</title></head>
<body>
<a id="aiframe" href="http://stackoverflow.com" target=_blank>IFRAME link</a>
</body>
</html>
That's interesting that your old code was working in IE. What version? And did you define doctype? It may have been quirks mode behavior.
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.