I understand that when you create a listener in jQuery Mobile like:
$('.this-class').on('swipe',tapHandler);
tapHandler will run twice. In order to eliminate this problem I have seen multiple solutions, such as:
$('.page-card').off('swipe').on('swipe',tapHandler);
or
wrapping it in side of pageinit in order to eliminate chaching issues if you are creating dynamic content within pagebeforeshow as seen here.
I also understand that even bubbling comes in to play here.
However, I was hoping that someone could explain why this known exists, and why the contributes to jQuery decided to take this route, knowing the drawbacks.
First lets discuss how jQuery Mobile works. Unlike normal web pages where jQuery is used jQuery Mobile uses ajax to load pages into the DOM, one or more pages can be loaded. Because of this, classic document ready is useless so jQM developers created page events.
Page events are major for this story. While document ready will trigger only one per page most of page events will trigger multiple times, depending on how much time page is re/visited.
Lets get back to on function (and all other similar functions like bind, delegate, deprecated live). Again when working on normal pages you will NEVER come to situation because same page will never stay in a DOM.
Here comes jQuery Mobile. If you are using a binding method inside a pageshow (or similar page event) that event will bind over and over. Basically on method was never intended to be used like this.
If you want to find out more about methods of prevention take a look at my other answer, look for topic: Prevent multiple event binding/triggering
Related
I am using the Elementor plugin in WordPress, and I'd like to know what events are triggered by this plugin while the preview page is loading.
So, I don't know how ( and if that's possible of course ) can listen to any triggered events and log them in the console.
At the moment I have tried several solutions I found on the internet, including the monitorEvents(document.body), but I took no valuable information as the common solutions on the internet are related to common events, like mouse events, keyboard events, elements load events, etc.
For example, from the Elementor plugin documentation I know that there is an event called elementor:init, but using all those methods available currently on the internet, I cannot catch that kind of event.
Keep in mind, I don't mind if it's possible to see the data emitted for the given event. I am happy with only see the event name.
Also, keep in mind that I need this information just for debugging purposes. So, if you have any alternative method that can let me access the events, will be very welcome. For example, let's say, if there's a kind of events registry in the window, and I can access it, then this could be also very helpfull.
So is there any way to check the triggered events using JavaScript?
Imagine that there's a button on one web page (not mine) and when it's clicked it performs some
Javascript. I want to have a button on my web page that performs exactly the same. So I need to
attach all necessary js files (but first I have to find them) to my html page and sometimes add some js to my html page.
What I usually do in this case? I inspect this button html element to see if there's onclick attribute for this button. If it is, I see the function called when button is clicked and then I try to search for this function in current html page and all js files attached to page. Also I need to find all dependencies (like jQuery, fancybox etc.).
If the button doesn't have onclick attribute I have to look for direct getElementById or jQuery selector pointing to this button with rest of code there. Sometimes there's no such a selector and I have to find a nested selector - really hard and annoying thing.
Is there any better, automated way for doing things above. Ideally after selecting the element in DOM (button in this case) and pressing some magic button I will be able to see all js files involved in processing this click and also js code in html page.
It's going to involve digging no matter what you do. But Chrome's Dev Tools can help with the attached event handlers, to an extent. When you right-click an element and inspect it, on the right-hand side there's a panel showing various tabs: [Styles] [Computed] [Event Listeners] [DOM Breakpoints] [Properties]. The [Event Listeners] one shows the listeners directly attached to that element. Of course, on a site using jQuery (which is more than half the sites using JavaScript at all), looking at the handler will dump you into the jQuery event handling code, but it's a start.
Just as a side point: While it's fine to look at the source of pages for inspiration, or to see how they solved a particular problem, or what plugins they're using to get an effect, etc., I assume you're not grabbing large sections of their actual code (as opposed to libraries and plugins with liberal licenses) without their permission, which is probably not cool.
I need to make a change to an old page as quickly as possible, and the effort to AJAX-ify it in order to obviate postbacks would take too long (making a more correct version of it will have to come later, this new functionality needs to be in place ASAP). The javscript changes required are too complicated to attempt entirely in the plain JS the page currently uses for everything (it's enough of a mess as is), so I decided to implement the new functionality quickly using jQuery.
Everything works fine until there's a postback, after which the document ready function still runs, but the selectors no longer find anything. I'm not using ASP.NET AJAX, so there's no UpdatePanels or partial postbacks.
What's happening and how can I fix it in the simplest, fastest possible way?
While $(document).ready() is ideal for one-time initialization routines, it leaves you hanging if you have code that needs to be re-run after every partial postback. Of course there are ways to get around this. But can you try using .NET franeworks pageLoad() and bind your events there and see if selectors still work after postback.
<script type="text/javascript">
function pageLoad() {
$("#Button1").on('click', function () {
...
});
}
</script>
If you have a a trigger attached to the DOM, and that element in the DOM gets replaced, the trigger will be lost. Such a trigger might look like $('#mydiv').on('click', function(){});.
Instead, you have the attach the trigger to a DOM element that wont be replaced. The easy way is to attach this to the document, but you'd be recommended to narrow the search.
Such a selector would look like
$('document').on('click', '#mydiv', function() {});
This means that if the element #mydiv gets recreated, then the trigger is not lost.
You can read more about delegated events at http://api.jquery.com/on/
I am doing an AJAX call to replace everything below the header and everything above the footer of a the page when the user clicks a filter link.
The problem is that after the AJAX event, all the JavaScript events bound to the various DOM elements break. This makes sense as those were bound on a much lower module level example
$(".innerDiv").on("click",function(){doSomething();}
and by replacing the content of the parent container these events are no longer bound.
What is the correct way of handling this problem? I could add the event listener to a much higher level e.g
$(document).on("click",".innerDiv",function(){doSomething();}
But this would have the same inefficiencies and issues for which the live() function in jQuery was deprecated.
The other solution that I have found suggested is to rebind the events after the AJAX call. The problem is that this is a fairly complex page I am dealing with, and it contains a lot of JavaScript modules each of which have their own bindings. How would I keep track of every event that gets binded? Is there any way of accessing this information from within jQuery? should i be maintaining my own datastructure of all elements which have events bound to them?
Also would I need to unbind events using the "off()" function before making the AJAX request?
Thanks for your help
In JQuery could use beforeSend http://api.jquery.com/jQuery.ajax/ to unbind the events
I'm dynamically adding a lot of input fields through jQuery but the page gets really slow when reaching 200+ inputs (think of the page like a html excel sheet). This is fine really because this scenario is not very common. However, when I dynamically remove the input fields from the page using jQuery's htmlObj.remove() function, the page is still slow as if there were hundreds of inputs still there. Is there any way to explicitly free memory in jQuery/javascript?
My experience with this is from using Firefox. When using Internet Explorer, the page is really slow from the start but that's a whole different story.
The technique I'm using is called event delegation as it's supposed to be the least memory resourceful approach, compared to having all handlers explicitly bound to every object on the page.
Sadly, blur and focus events do not work with event delegation and therefore I need to bind these to every input. This could possibly be the memory hog here. Also, in Firefox it seems I can't use checkboxes for 'changed' or 'key[down|up]' events in event delegation as these checkbox events do not bubble up to the document. Here binding explicitly too.
Anyone can share some experience with this? Can't really show a demo right now as the site has not been launched yet.
Thx.
read this, I'm sure it will help.