I have a pagecreate declaration in my page. It is created each time I read a json file for each value in it.
The problem is that if I read the json file 3 times (with a refreshing button), pagecreate is declared 3 times for each value. So I get same declarations many times.
Is it possible to delete a "pagecreate" declaration?
Yes, you use on() to create the handler and off() to remove the handler.
$(document).on("pagecreate","#page1", function(){
});
$(document).off("pagecreate","#page1");
Related
I'm having trouble figuring out the correct syntax to use when a plugin/widget requires using a custom 'event' method instead of the standard jQuery events.
The jQuery UI MultiSelect Widget doesn't support the change method, and instead provides a click event which is fired when a checkbox is checked or unchecked. I'm trying to use the syntax supplied in the widget's documentation for the click event so that I can replace several change functions including the one shown below, but I'm having trouble figuring out the correct syntax. The structure for the click event is:
$("[name=Item]").on("multiselectclick", function (event, ui) {...});
I've tried inserting the function in between the curly brackets, and I've also tried .on("multiselectclick", function () {...}); without success, so I'm assuming that I need to insert something here: (event, ui)
I've managed to get the functions partially working by using a slightly different method $("[name=Item]").multiselect({ click: function (event, ui) {...}, but I'd really like to understand how to use the plugin's custom event so that I can get the functions working properly. I posted a fiddle with a very simple example here http://jsfiddle.net/chayacooper/cZRy9/5/, and included notes to indicate what wasn't working properly.
One of the functions where I'm trying to replace a change event with the widget's click event:
$("[name=Item]").change(function(){
$("#Styles1, #Styles2").hide();
$(".accordion").accordion("option", "active", false);
if( $("[name=Item]").val() === "Dresses"){
$("#Styles1").show();
$(".accordion").accordion("option", "active", 0);
$('varItem').val('Dresses');
}
else {...}
});
First issue about not hiding the Styles element when dresses is unchecked is straightforward. There is nothing in code to check state of the checkbox, only the value
Fix with:
if ((ui.value) === "Dresses" && ui.checked)
Using the ui object within a jQuery UI patterned widget is usually best source for your data or state , rather than using jQuery selector to look for the same thing.
I have never used this plugin, so to figure out what was available to me, I simply used console.log(ui) within the click handler so I could inspect the ui object to see what properties it contained, and found the checked property to add to above if conditional
If you do the same on a more complex widget like jQueryUI datepicker will see quite a significant number of ui properties , some of which are also method functions
DEMO (using custom event)
http://jsfiddle.net/cZRy9/2/
In a widget, I'm adding a refresh method and I need to cleanup everything before re-applying all the hooks. However, I'm not sure what are the consequences of calling this._hoverable(selector); multiple times on the same elements.
Looking inside jquery-ui-1.10.js, I see that the widget factory keeps a jQuery object of the elements, and it performs an add operation with the selector. While I assume it wouldn't add duplicate DOMelements, it's more the next operation : _on that makes me doubt.
Is it ok to call _hoverable and such multiple times on the same element?
No, you should not do that. Calling _hoverable() more than once on an element will register additional handlers on the mouseenter and mouseleave events.
If you absolutely have to call this method more than once, you will have to unbind these handlers beforehand:
this._off(element, "mouseenter mouseleave");
this._hoverable(element);
Note the events are namespaced under the hood, so the call to _off() above will only unbind the handlers registered through _on(), not additional handlers you may have registered yourself.
I have build a plugin (pluginA) based on zeptojs and inside this plugin I fetch data using ajax and attach a list of
How do I bind an event to these anchors? I was going for something globally like and then use $('[data-key]').pluginB() and then inside pluginB() have something like
$(this).on('click', function (e) { e.preventDefault(); ... }); but I am not able to bind the click event to anchors created dynamically.
I tried adding $('a').on('click', ...) before I call pluginA() but it's not firing.
What I really would like would be to use the bind() trigger() approach in order to decouple the two plugins, but I am having trouble finding a good example.
Use the delegating form of on to bind all desired links in a particular area (in this example, the entire body):
$(body).on('click', 'a[data-key]', function(e) {e.preventDefault();...});
Now all links with data-key will trigger your function, regardless of whether or not they were present at the time you called on; subsequently-added links will automatically get the behavior, and removed links won't leak memory by holding dangling handler references.
I'm trying to maintain a widget that triggers events using one of these two lines of code:
this.element.trigger('change'); // or...
stop: function (event, ui) { that.element.change(); }
The word 'change' occurs only 4 times in the code, in one of the 2 forms above. However, I've got no idea what's going on here. There's no event handler in the change call, and there are no bind, delegate, on, or live calls, so something external is presumably setting this up. Can anyone fill me in? Are there any docs on this? Thanks.
Those two lines of code simply trigger a change event to this.element using two different allowed syntax.
Using .trigger():
this.element.trigger('change');
Or using a shorthand method .change():
that.element.change();
You can actually bind an event handler to the element represented by this.element to handle this event.
Without knowing your plugin, it is difficult to answer you precisely on what is this.element.
But take the example of the autocomplete plugin. In this one, this.element is actually the input field the autocomplete plugin is applied to. If the change event was triggered like supposedly done in your question, you could bind an event handler to the input like this:
$('#myinput')
.autocomplete()
.bind('change', function() { });
Now if this plugin relies on the jQuery UI Widget Factory, it is advisable to use the method _trigger() to trigger events instead of the jquery .trigger().
Using _trigger() will make sure to execute any callback defined in the plugin's option with a correct context and also trigger that event for this.element (like above). So you could have:
$('#myinput')
.somePlugin({
change: function(e, someData) {
// "this" here will be `this.element´
}
})
.bind('change', function() { ... });
The answer turned out to be simple - there was no event handler, there were no bind/etc calls, jQuery does nothing behind the scenes, so the trigger calls did nothing. I commented them out and the widget behaved exactly the same. Doh.
I have common code that I want in various events for our standard jqGrid configuration.
I use $.extend($.jgrid.defaults, { }); to set some code for the following:
loadError()
beforeRequest()
loadComplete()
gridComplete()
Now, when I define an instance of my grid, there is a potential that I would like to execute more code in any of these events.
My initial solution was to have global variables, e.g.: loadCompleteEx() and if they are defined, call them at the end of the default method calls. This was great if I only had one grid on the page, but I am trying to implement a solution that would work regardless of how many grids are on the page.
Is there some way to hook in and add a method to execute when any of these events are fired? I'm using jqGrid 4.1.2 and jQuery 1.6.
Thanks in advance for your help!
You can .bind() your own functions to events, so that your function executes with the event. You could use this to bind different events to each grid, or bind one function to every grid at once.
.bind() also allows binding to standard javascript events, custom events, or even undefined strings which you later call with .trigger().
It needs to be attached after a selector, which can select a specific grid or multiple grids in your case.
$('#Your-Grid-Selector').bind('eventToBind', functiontoBind() {
alert('Triggered eventToBind');
});
jQuery Documentation
Edit: This question may be a duplicate of this SO Question, which has a good solution you can use for this very issue.