$(document).on("pagebeforeshow", function(event) {
$("#mybtn").on("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("twitter.html", {
reloadPage: false, changeHash: true,
});
$('#mybtn').unbind('');
});
});
Can u tell me why Unbind is important in Jquery mobile and Please tell me best way To unbind events.I used Following way to bind and unbind events.Is that ok
Have a look at this example: NO UNBIND USED
CODE
$("#page2").on("pagebeforeshow", function(){
$("#testBtn").on("click", function(){
alert("Hi!");
});
});
If you go from page 1 to page 2, and then click the button named Click me you will see that the alert "Hi!" is shown properly. The event was binded on pagebeforeshow, till now everything is ok.
Now go back to page1, and then load again page2, click again the Click me button.. you will see that the alert is shown 2 times! and this is WRONG. That's why you need to unbind the event BEFORE you bind it again.
Basically, every time you load page2, you bind a new event to the button.. so, if you load 10 times that page, you will have 10 events binded to the button, that will fire once the button is clicked.
Here's a working fiddle with the unbind (to unbind the event, I used off()): UNBIND USED
CODE
$("#page2").on("pagebeforeshow", function(){
$("#testBtn").off("click").on("click", function(){
alert("Hi!");
});
});
have a look here to understand why I used off() instead of unbind(), and also here if you wat to see how off() works
I hope this helps to clarify your doubts..
Related
$('#ac').autocomplete({
source: '/url',
appendTo: $('#ac').closest('.popupWindow'),
select: function (event, ui) {
// do stuff
}
});
in IE9 first time everything works fine, but when i type text is second time, elements don`t reacts on clicks
error appears only when using appendTo option
solve it: on one of parent elements was click event handler with e.stopPropagation()
I try to show context menu jstree on hover event with using api context menu plugin, but it doesn't work. Have you any idea how to do this?
I had to implement the same thing. Here's what I ended up doing:
var $treeView = "myTreeList";
$treeView.jstree({
/* options */
})
.on('loaded.jstree', function() {
$(".myTreeList a").hover(
function(){
$treeView.jstree("show_contextmenu", $(this));
}
);
})
I just hooked up a hover event to every anchor in the tree when the loaded event fired (don't try to use the li elements or the event on a child will fire along with all it's ancestors). You could also use "on" instead of just hover and you wouldn't need to do this in the loaded event handler but that's what worked for me.
I'm using jQuery tabs. In one of the tabs is a wysiwyg editor that needs to be refreshed after the tab is displayed, but I can't figure out if there is an event that fires after the tab is loaded.
From my understanding, the load event is only for tabs that use ajax calls. I've tried using it but it doesn't fire:
jQuery ui tabs load/tabsload event does not fire
In that example they use an iframe, which has a load event that is triggered. I'm just using divs, which don't have a load event, and nothing like an onshow event listener.
The closest I've been able to get is the tabsselect event which fires when a tab is clicked, but before the new tab is loaded.
Is there any event that fires after the tab is loaded when I'm not using ajax?
Thanks
Did you try event-show?
http://jqueryui.com/demos/tabs/#event-show
$( ".selector" ).tabs({
show: function(event, ui) { ... }
});
The show event did not work for me, but the create event did:
$( ".selector" ).tabs({
create: function(event, ui) { ... }
});
http://api.jqueryui.com/tabs/#event-create
Now the event is called activate
$( ".selector" ).tabs({
activate: function(event, ui) { ... }
});
http://api.jqueryui.com/tabs/#event-activate
So, I am using jQuery Mobile and I'd like to animate individual elements on a page change both before and after the change. I set transitions to "none" in jQuery moblie then try to add class to css3 animate individual elements. It works on pagechange, so when you go to a new page the transition on the elements appears, but pagebeforechange happens to quickly and the animation is lost. Is there a way to make the pagebeforechange function wait until the animation is done then go on to the next page? preventDefault(); stops the page from changing at all. I need like a call back or deferred obj or something? If I call changepage in pagebeforechange after the animation is done...the function runs recursively :(
transitions: function(){
$(document).bind( "pagebeforechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
$(document).bind( "pagechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
},
Thanks in advance!
you could try pageshow instead of pagebeforechange. Beaucse pageshow is fired before the pagechange event
I have the following bit of jquery:
http://jsfiddle.net/tad604/Ck2qk/10/
I want the foo div's click handler to not fire, when you click and drag. I've tried doing all sorts of things inside the stop/start events of the drag (event.stopPropagation() etc) all to no avail. The click handler is fired after the drag event regardless.
It's annoying, but the only fix is to remove the event on drag start and put it back on drag stop. Try this:
$(".foo").click(function(){
alert("blah");
});
$(".bar").draggable({
stop: function(event) { setTimeout(function() {
$(".foo").click(function(){
alert("blah");
}); }, 100)},
start: function(event) { $('.foo').unbind('click'); }
});
Now there is still the problem that your click events are probably a bit more complicated than this, and you probably don't want to have to rewrite them. You can save the events for later using jquery data like this:
var events = $('#test').data("events");
Alternatively, you can use jquery live function to attach the click event so the event will only ever be binded to an element that matches that selector. That means if you change the class while dragging, so that it no longer matches that selector, it would no longer have that click event. Something like this might work:
$(".bar .foo").live('click', function(){
alert("blah");
});
$(".bar").draggable({
stop: function(event) { setTimeout(function() {
$(".draggableBar").removeClass('draggableBar').addClass('bar');
}, 100)},
start: function(event) { $(this).removeClass('bar').addClass('draggableBar'); }
});
You'd also have to update the css so draggablebar gets the same style as bar.