Please consider this test:
Main file:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var secondwindow = false;
$(function() {
secondwindow = window.open("secondwindow.html");
$(secondwindow).load(function() {
secondwindow.setWindow(window);
})
$("#custom").click(function() {
$(document).trigger("custom");
});
});
</script>
</head>
<body>
<button id="click">Click event</button>
<button id="custom">Custom event</button>
</body>
</html>
Second (popup) file:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var mainwindow = false;
function setWindow(obj) {
mainwindow = obj;
$(mainwindow.document).on("click", function() {
$("body").append("<p>Click event from main window</p>");
});
$(mainwindow.document).on("custom", function() {
$("body").append("<p>Custom event from main window</p>");
});
};
</script>
</head>
<body>
</body>
</html>
My goal is to add a event listener in the second window for custom events in the main window.
What I found, and this test can proves, is that event listening to other window works for "standard" events like click and not for custom events.
Can you tell me if this is a jQuery limitation or I'm missing something?
(I'm sorry I could not put that code in a jsfiddle because window.open doesn't work very well with jsfiddle)
The problem is that you need to take into account the jQuery instance you're using to define your targets and trigger.
secondwindow.html -> $(mainwindow.document)
is not the same as
main.html -> $(document)
It needs to be:
secondwindow.html -> mainwindow.$(mainwindow.document)
Or reverse it:
main.html -> secondwindow.$(document)
secondwindow.html -> $(mainwindow.document)
jQuery events are managed by jQuery.event object, and this is tied to the instance of jQuery that's being used. You can for example get which events are registered this way:
$.event.global
You'll see that the events registered are not only dependent on the selectors themselves, but on the jQuery instance as well. And this is the case for click event as well as custom events.
Related
Could someone explain why the clicking on button1 doesn't get captured? I know return false on event click will stop the propagation, but it should still capture the element by document.addEventListener('click', function(e) {console.log(e.target);}); because we are trying to capture directly the main element via e.target not its parent element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
return false;
});
});
</script>
</head>
<body>
<button id="button1">Button1 (dont get captured)</button>
<button id="button2">Button2 (get captured)</button>
<script>
document.addEventListener('click', function(e) {
console.log(e.target);});
</script>
</body>
</html>
I can't change that jQuery code $("#button1").click(function(){return false});, but still, want to capture the button1 element when it gets clicked (with javascript), is there any workaround?
i could bind another event handler to button1 like this document.getElementById("button1").addEventListener("click", function(e){console.log(e.target)}); in real there are many many elements which I want to capture (with different classes and id), it would be impractical to add an event listener to each of them, I showed one button just for an example. , I just simply want to log whichever element is clicked.
I can't change the jQuery code or HTML of the page, i want to run some tests in chrome console only, for which i want to capture each element which is clicked
thanks
The return false; prevents the browser from performing the default action for button1 link.
The equivalent code for return false is:
$('.button1')
.click(function (event) {
event.preventDefault();
event.stopPropagation();
});
If you just want to stop propagation use stopPropagation().
Take a look at this, and read more about preventDefault() and stopPropagation()
Not very efficient but worked for me
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
return false;
});
});
</script>
</head>
<body>
<button id="button1">Button1 (dont get captured)</button>
<button id="button2">Button2 (get captured)</button>
<script>
elements = document.querySelectorAll('body *');
elements.forEach(function(elem) {
elem.addEventListener('click', function(e){
console.log(e.target); // or simply console.log(elem)
});
});
</script>
</body>
</html>
Thanks to everyone, especially #mplungjan who gave me this idea
I have two files index.html and subpage.html. Using jquery load() i am loading subpage.html into a div #result in index.html.
I have written js in index.html for both index.html & subpage.html.
Pages goes like this:
index.html:
<script type="text/javascript">
$("document").ready(function(e) {
$("#result").load('subpage.html');
});
</script>
<div id="result"></div>
subpage.html:
<p>Sub page</p>
<input type="button" id="clickMe" value="Click" />
But here, click function written in index for button #clickMe is not triggering while clicking the button.
Is there any possible way to make this happen?
If you want to use the .on delegation, you have to attach the event to a higher level element and specify the object or class as the delegate.
$('body').on('click',"#clickMe", function(){
alert('clicked dynamic dom element');
});
http://api.jquery.com/on/
You can make a function to set your Event handler, and do not forget to use .off for setting triggers. and afer $("#result").load('subpage.html');, call that function.
function setEventHandler(){
$('#clickMe').off('click').on('click',function(){
// codes here
alert('Clicked');
});
}
and your codes will be :
<script type="text/javascript">
$("document").ready(function(e) {
$("#result").load('subpage.html');
setEventHandler();
});
</script>
<div id="result"></div>
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 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.
I am learning the prototype framework and javascript in general and am tring to refactor a bit of existing code to create some html from data inside of a class using an event listener. I am having problems getting the events to fire and getting the corresponding listener code working. Here is a small example, that I can't get working:
<html>
<head>
<title>Event Test</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
MyClass = Class.create({
initialize: function(args) {
this.div_id = $(args['div_id']);
},
test: function() {
this.div_id.fire('ag:test');
}
});
var myclass = new MyClass({div_id:'test'});
$('test').observe(myclass, 'ag:test', function(evt){
$('test').insert('<p>Test</p>');
});
myclass.test();
</script>
</head>
<body>
<div id="test">
</div>
</body>
My intention is that I just want to add a bit of html to the div when the class is instantiated, or when some other method is called on the class. Right now this code doesn't do anything. Using firebug, it seems that my class is never being instantiated here.
I've been looking at examples and the prototype docs, but can't figure out what I'm doing wrong.
Thanks!
EDIT: Changed to not fire event in the class constructor.
You listen the #test div's ag:test event but fire the event on the class so it is very normal that nothing happens. You should listen to the events of the class you are creating but then you cannot catch the instantination event since you cannot attach event handlers before the class is instantinated. So you have to find another way.
Got it! It was a problem with deferred loading. In the original question I had all of the javascript defined in the header. It was failing because when I use $('test'), the element doesn't exist yet. The correct code would be:
<html>
<head>
<title>Event Test</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
MyClass = Class.create({
initialize: function(args) {
this.div_id = $(args['div_id']);
},
test: function() {
this.div_id.fire('ag:test');
}
});
</script>
</head>
<body>
<div id="test">
</div>
<script type="text/javascript">
var myclass = new MyClass({div_id:'test'});
$('test').observe('ag:test', function(evt){
$('test').insert('<p>Test</p>');
});
myclass.test();
</script>
</body>