Example to demonstrate the issue can be found here:
http://jsfiddle.net/Byyu2/
As you can see only the first "Add" button triggers an event. The dynamically generated button does not. This is understandable as on page load these elements have not been created.
So what do I need to change to enable dynamically generated elements to also be registered to an event?
Thanks for looking.
The answer mentioned is quite old. If you can, upgrade to MooTools 1.3 instead of 1.2. In MooTools More, you will find the Element.Delegation package. The package handles delegation for all MooTools native events, except focus, blur, mouseenter and mouseleave.
You will find an updated JS Fiddle here: http://jsfiddle.net/Byyu2/1/
An answer on implementing .live (from jQuery) in mootools may be of some use.
What about using Element.cloneEvents?
Check this sample:
http://jsfiddle.net/Byyu2/5/
It looks kind of ugly, because you can't call cloneEvents() directly on the new row (cloneEvents() does not work recursivly), but it works :-)
Related
In my (javascript, jQuery) code, I use two ways of firing events
jQuery('body').trigger('crazy-trigger-event');
jQuery("body").get(0).dispatchEvent(new CustomEvent("crazy-dispatch-event"));
In the snippet here:
http://jsfiddle.net/jts9jhbt/3/
I have registered for custom events using both jQuery .on() and the DOM .addEventListener() methods.
Then I fire the events using both jQuery .trigger() and DOM .dispatchEvent() methods.
It seems like the listeners registered using .on() receive events fired both ways.
But the listeners registered with .addEventListener() only receive events fired using .dispatchEvent().
My use case is that I have a mix of legacy code and jQuery code, and it seems like it's safest to use .dispatchEvent() so that it's compatible with both.
So is there some change to the code I can make so that listeners registered with .addEventListener() can recieve events from .trigger() ?
Simple Answer
No, you can't.
Explanation
The main reason is that jQuery needs to work across multiple browsers and ...
"[...] jQuery's event system is a layer on top of the DOM event system."
Eventhough there are exceptions, there is no efficient way for jQuery to know which events are supported by the browser currently due to the lack of a getEventListeners method.
The developers think that the creation of a solution
"[...] isn't possible to do without breaking existing code or causing performance issues."
If that sounds like a challenge to anybody, you are free to prove them wrong by posting your solution.
The detailed explanation can be found in Dave Methvin's answers to jQuery's issue #2476.
In internet explorer 8, emit strange jquery attributes that sometimes can cause problem and when I need to select them, the selector won't work.
I don't know if this is related to my rendering problem, but I've never noticed it before, in IE8 or any other browser. Can someone explain what these attributes are?
sizzle-1377765392290 ="[object Object]"
also it creates unique id for each element
i.e: jQuery110201441698622493836
https://www.dropbox.com/s/e5l0r9weht23mhn/Ie8.PNG
Thanks You
See the answer here, jQuery uses it to attach event handlers etc in IE.: https://stackoverflow.com/a/16341470/1371408
As i can see in this bugs.jquery.com/ticket/8539 that sizzle cache bug was fixed in 1.7 version of jquery .
And as per your comment you included older version of jquery 1.1.0 so updating it to latest release of jquery will solve your issue .
You can remove this by,
var re = /\s*(sizset|sizcache)\d*="[^"]*"/gi;
source = source.replace(re,'');
http://jsfiddle.net/mblase75/fMdVc/
Alternatively, jQuery has a .removeAttr() method, but you'll have to apply it to specific tags:
jQobj.removeAttr('sizset').removeAttr('sizcache');
Have a look
Explanation
For reasons which I appreciate, as of jQuery 1.8, the load event has been deprecated, however, it was still possible to detect whether an image was loaded (even if it was in the cache) just by using certain workarounds. Therefore, the deprecation of the event is actually quite irritating as it posed as a starting point at the very least for detecting when an image has finished loading onto the page.
Nevertheless, it has been deprecated, and I am therefore asking this question with the hope that I will find an answer, thus, help me and potentially others that may soon be running into the same issue.
An Example (before jQuery 1.8)
Without using a plugin (as this should be able to be done in very little code, so a plugin is unnecessary), I would like to call a function when each image on my page is loaded.
Something like this (this will not work due to the deprecation):
$('#mn_content .column').on('load','img',function(){
console.log('loaded');
})
My Question
Is anybody aware of how to achieve this now that the load event does not exist?
Please note: If the only way to achieve this (now), is to use the Javascript new Image objects, then please do not waste your time helping me as others need your help more than I do. I am able to write this code, it just seems a bit long winded for something so basic.
I have simply asked this question to ensure there is not a way of achieving this without the use of the Javascript image objects
I will of course be very grateful for any help, I just don't want you spending much time on me when there are others that need your help more. :-)
The load event still exists, you just can't bind to it using .load anymore. Your event delegation example should continue to work on into 1.9 and 2.0 (if the browser you're testing in supports bubbling of the load event)
I personally would still use the new Image method because i don't trust that all browsers will always bubble the load event properly.
Edit: Sorry if i wasn't clear, the point i was making is that the load event is still there, you just have to properly bind to it. Since the load event doesn't bubble in all browsers (if in any browser?), you must bind the event directly to the image. I'd suggest using the method that you asked us not to provide you an example of.
I'm looking for some combination of a plugin or clever programming technique that will allow me to have a context-style menu in jQuery but rather than actually triggering it from a right-click, I'd like to be able to have it triggered from a button that can potentially move to different locations on my window. I can handle the part of the button itself moving without much trouble. My requirements are:
It should be compatible with jQuery UI 1.8 and my custom themeroller-generated theme
It needs to be relocatable
I either need to have it execute a callback when an element is selected, or have it honor the href on any a tags that make up the menu elements
I looked at Selectmenu and it's close, but it seems to want to always show the currently selected item, which is not quite what I want. Also I had to hack around it in an ugly way to make it relocate properly.
This blog post is also pretty close but the jsEvent.clientX and jsEvent.clientY don't put the dialog in the right place and I'm a little stuck as to what to do about that. Also I don't really want the options to be buttons. The menu-ish plugins have them looking right.
This plugin here is pretty much exactly what I want (I'd have to add the bit about the button, but it doesn't look too hard). But that requires jQuery UI 1.9.
Any thoughts? It may be that this is just such a rare requirement that I have to roll my own, but somehow that seems surprising and I feel like I might be missing something.
I like this plugin. It seems that is more compatible than jQueryUI-contextmenu.
Is a fork of jQueryUI-contextmenu actually
jQuery-contextMenu
I liked it because it has more examples, and it says that only use one footprint in memory so it consume less resources in comparison to others. Works with +jquery 1.6 and don't necessarily need html markup,
The menu plugin you mentioned last seems to work fine with jQuery UI 1.8.x, but not jQuery UI 1.7.x.
jQ-UI 1.8.7: http://jsfiddle.net/william/xxGUW/
jQ-UI 1.8.9: http://jsfiddle.net/william/xxGUW/1/
jQ-UI 1.8.14: http://jsfiddle.net/william/xxGUW/2/
jQ-UI 1.7.2 (broken): http://jsfiddle.net/william/xxGUW/3/
I have the following code calling a Javascript function in a nice shiny standards complient manner :). Please note that I must send elementsList[i] to the function (the this keyword will not be adaquate) as the event listerner is being attached to it's nephew (for want of a better term)
This rather mangled code will effectively find the control element for the dynamic behaviour of the current node in elementsList[i] and add a click event listener to it. When fired it passes the clicked node to the toggle function.
elementsList[i].previousSibling.lastChild.addEventListener
("click", (function(el){return function(){toggle(el)};})(elementsList[i]),false);
Thing is it doesn't work at all with IE8 and below, and in spite of spending most of the morning trying to find a work around I just can't get it to play ball. If someone knows how to translate this into IE crapo code, I'd be grateful to see it.
Have you tried
elementsList[i].previousSibling.lastChild.attachEvent
("onclick", (function(el){return function(){toggle(el)};})(elementsList[i]),false);
2 potential suggestions.
1.) Include jQuery in your project and use their x-browser event bindings (or mootools or some other lib)
2.) Not so-recommended, roll your own x-browser event bindings