I am working to use IE Dom interface to automate IE page access. I am trying to get all event handlers defined in a page. I am using IHTMLElement object now for this purpose. If the html page defines "onclick=xxx", element.onclick returns the click handler. However, if an event handler is defined in javascript, element.onclick simply returns NULL. What's the right way to get the event handler then?
Thanks,
xin
Below is an example that uses javascript to define event handler.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> </script>
</head>
<body>
<script>
$(document).ready(function(){
$("a").click(function(event){
$(this).hide("slow");
alert("Thanks for visiting!");
window.location="http://cnn.com";
});
});
</script>
<a>jQuery</a>
</body>
</html>
This is not possible.
Related
I am new to javascript, and I have tried to debug as much as I can but I still cannot figure why I cannot get the alert "Event 1" to show up when I click on text:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<script type="text/javascript" language="javascript">
$("#id").bind("click", function() {
alert("Event 1");
});
</script>
<body>
<div class="foo" id="id">Click</div>
</body>
</html>
The problem is that you need to ensure that you only bind to the element once the page has loaded, and the element is therefore accessible. This can be done by wrapping your existing jQuery in a $(document).ready(), as can be seen in the following working example.
Also, note that .bind() has been deprecated as of jQuery 3.0, and you should use .on() instead. Note that the elements that you target with .on must exist at the time that you make the call to them:
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()
If your target element is not visible in the DOM on page load, you can use event delegation to bind to an element that is visible on page load, and then delegate that functionality to the target.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#id").on("click", function() {
alert("Event 1");
});
});
</script>
<body>
<div class="foo" id="id">Click</div>
</body>
</html>
Hope this helps! :)
I'm new to jQuery, so this should be a simple question.
As far as I understand, I can bind a method to listen to an event, such as the click of a button, using
$('#buttonID').bind('click', function (){//some code});
However, this isn't working for me, so I must be doing something wrong.
This is my simple html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script>
<script src='test.js'></script>
</head>
<body>
<input id="SignIn" type="button" value="Sign In"></input>
</body>
</html>
Apart from loading jQuery files, it loads file test.js, which looks like this:
// JavaScript Document
$('#SignIn').bind('click', function() {alert('hi');});
Is that not enough for binding? I was hoping this would fire an alert dialog, but it doesn't, it seems the callback is not executed at all.
What is wrong here? Both files (html and js) are located in the same directory, and Google Chrome does not complain about anything in the JavaScript console, so from that end, everything should be fine.
Thanks for all help!
Wrap your code in document ready handler. It accepts a function which executes when DOM is fully loaded.
As you are using jQuery 1.3
$(document).ready(function() {
$('#SignIn').bind('click', function() {
alert('hi');
});
});
For jQuery 1.7+,
$(document).ready(function() {
$('#SignIn').on('click', function() {
alert('hi');
});
});
Additionally, As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
$(function(){
$('#SignIn').bind('click', function() {alert('hi');});
})
Try
$(function(){
$('#SignIn').click(function() {alert('hi');});
});
Move your Javascript to the bottom of the HTML page, right above the closing body tag.
That way the DOM is ready when it is loaded, and there's no need for $(document).ready() calls.
https://developer.yahoo.com/performance/rules.html#js_bottom
You may want to include your JavaScript files at the very bottom, and everything should work as expected. It is recommended to do this and to include CSS files at the top (head tag). For more information see link included by #Grim...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<input id="SignIn" type="button" value="Sign In"></input>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script>
<script src='test.js'></script>
</body>
</html>
$( "#target" ).click(function() {
//Write some code here
});
You can try this.
$(document).ready(function(){
$('#SignIn').on('click', function() {alert('hi');});
});
You can use this.
$(document).ready(function () {
$("#SignIn").click(function () {
alert('demo');
});
});
My problem is that there is no way to make preventDefault() work.
Here is my code:
HTML:
<a class="list-ui-controlcol-link list-ui-controlcol-link-delete" href="http://localhost/lmvc_trunk/pages/delete/17">Törlés</a>
JQUERY:
$(".list-ui-controlcol-link-delete").click(function(event){
event.preventDefault();
});
Even if I copy-paste the original example from jQuery's own site (http://api.jquery.com/event.preventdefault/) it is not working.
Could you explain me why this happening and how to make preventDefault work correctly?
You need to make sure that your script is executed after the DOM is loaded:
$(document).ready(function() {
$(".list-ui-controlcol-link-delete").click(function(event){
event.preventDefault();
});
});
See this page for more details: http://api.jquery.com/ready/
Where do you include your script? If you include the script in HEAD when the script loads there's no a.list-ui-controlcol-link-delete is present in the DOM.
Try doing this:
<html>
<head>
<title>test</title>
</head>
<body>
Torles
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Where app.js contains:
$('.list-ui-controlcol-link-delete').click(function(e) { e.preventDefault(); });
Although I'd recommend using the .on() function as it will dinamically bind the events on newly generated DOM elements:
$(document).on('click','.list-ui-controlcol-link-delete',function(e) { e.preventDefault(); });
I have this line of code but it throws an error. What is the problem with the code?
<html>
<head>
<script src="http://prototypejs.org/javascripts/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
Event.observe('target', 'click', function(event) {
// ...
});
</script>
</head>
<body>
<p id='target'>Click me!</p>
</body>
</html>
Load the script after your tag is loaded. This way you dont need to detect the dom:loaded event. :)
<html>
<head>
<script src="http://prototypejs.org/javascripts/prototype.js" type="text/javascript"></script>
</head>
<body>
<p id='target'>Click me!</p>
<script type="text/javascript">
Event.observe('target', 'click', function(event) {
alert('clicked me');
});
</script>
</body>
</html>
The element you are trying to bind the event handler to does not exist in the DOM at the time your code is executed. Wrap it in a DOM ready event handler:
document.observe("dom:loaded", function() {
Event.observe('target', 'click', function(event) {
// ...
});
});
This is mentioned in the Prototype docs:
One of the most common errors trying to observe events is trying to do
it before the element exists in the DOM. Don't try to observe elements
until after the dom:loaded event or window load event has been fired.
I have a JS script which created a new Node and inserts it to the HTML page. I am handling DOM mutation events and can capture DOMNodeInserted event. Inside that function I want to find out the source (i.e. in which part of the HTML has the script function been called) and the target (i.e. in which part the node is being added in the HTML page).
I am able to find the target using event.target, but I am not able to find the source of the event.
For example, consider the following pseudocode HTML page:
<html>
<head>
<script>
function test() {
//DOM access
<div_object>.setAttribute("attr", "value");
}
</script>
</head>
<body onload="test()">
<div id="123">
</div>
</body>
</html>
I want my source to be BODY (because that is were the script is initiated), target should be div(123) (because the attribute is added to div_123.
How can I do this?
Sorry, you can't find out what piece of code caused an event to be triggered, they're completely decoupled. You would have to have the triggering code co-operate by storing the values of its own this/event.target in a variable for the triggered code to pick up later.
But then if you have co-operation like that, you wouldn't need DOM Mutation Events.
If you have an event handling layer (as is part of many JS frameworks), you could put the this/target tracking in that layer, so the triggered code could ask “what was the last event that fired, before me?”.
But I'm not convinced this would be worth it. It's usually best to add your own co-operative hooks that communicate between components; you can't generally rely on DOM Mutation Events since they're not globally and completely supported (or indeed supported at all on IE<9).
What about
<html>
<head>
<script>
function test(element) {
//DOM access
element.setAttribute("attr", "value");
}
</script>
</head>
<body onload="test(this)">
<div id="123">
</div>
</body>
</html>
?
Interesting. I had a look here (answered to get formatting)
<html>
<head>
<script>
function test(e) {
if (e) var event=e;
//DOM access
var t="";
for (o in event) t+='<br/>'+o+':'+event[o]
document.getElementById('d123').innerHTML=t;
}
</script>
</head>
<body onload="test(event)">
<div id="d123">
</div>
</body>
</html>