How to stop event propagation in Hammer.js (2.0.2)? The technique used in the relevant test (https://github.com/hammerjs/hammer.js/blob/master/tests/unit/test_propagation.js) does not apply to all type of events. If you replace the 'tap' event with a 'press' one, the test fails.
In your parent element check what the event.target is. If it is not the parent element and is set to the child then ignore the event.
eg:
if(event.target != parent){
return;
}
In order to solve this issue I wrote a small mixin to extend hammer.js with event propagation:
https://github.com/josdejong/propagating-hammerjs
In your parent dom bind click event, and stopPropagation it
Related
How should I get info about child view's events on parent view?
For example:
I pass and argument to the child (Alloy.createController('myChildView', { info: test }).getView()). Then I work with it and set a global variable from false to true (Alloy.Globals.childPrecessed = true). After that, I can spent any time on this view, but when I click on a button which fires a hide event, I should process the info from parent view.
My first thought was I fire az appwide event (myChildHide), and listen for it in the parent view. If I catch it, then I process the info, and destroy the listener...
Is this the best method? I'm not sure...
Has anybody better solution for this?
Thanks!
I am a fan of event listeners, so I think your approach is a good one.
What I normally do is to initiate the event listener right before I need it to be effective, i.e. in the method opening the child window. But first I use backbone events for simple event triggering. See Fokke Zandbergen's article for further info. So assuming you have set up a "dispatcher" then I would do something like this:
function openChild(){
dispatcher.on("child-calling", doChildsWork);
// ... open child view
}
Then in the doChildsWork I would disable the event handler once called:
function doChildsWork(args){
dispatcher.off("child-calling");
// ... do work initiated by child view using args...
}
And finally in the child view (assuming you have set up a "dispatcher") you would do something like this:
function doChildsWork(){
// ... Tell parent to do some work
dispatcher.trigger("child-calling",{test:true});
// ... continue whatever is going on in child
}
I use this approach a lot - and it works well :-)
/John
This will do it:
$('input').on('change', function(event){
...
}).change();
...but what if there is another plugin installed that hooks some function on the change event? I'll trigger that function too, and it may not be desirable. How can I avoid such conflicts?
Use namespaced events
$('input').on('change.myevent', function(event){
...
}).trigger('change.myevent');
This will get triggered on normal change events (along with other change handlers on it) but will also be triggered by change.myevent (only it)
This will also allow you to unbind only your own event in case you need to ..
I was under the impression that jQuery's on event handler was meant to be able to 'listen' for dynamically created elements AND that it was supposed to replace the behavior of live. However, what I have experienced is that using on is not capturing the click event whereas using live is succeeding!
The tricky aspect of my situation is that I am not only dynamically creating content but I'm doing it via an AJAX .get() call, and inserting the resultant HTML into a modal .dialog() jQueryUI popup.
Here is a simplified version of what I was trying to accomplish (wrapped in $(document).ready(...) ):
$.get("getUserDataAjax.php", queryString, function(formToDisplay) {
$("#dialog").dialog({
autoOpen: true,
modal: true,
buttons...
}).html(formToDisplay);
});
$(".classThatExistsInFormToDisplay").on("click", function() {
alert("This doesn't get called");
});
From the documentation for on I found this which which was how I was approaching writing my on event:
$("p").on("click", function(){
alert( $(this).text() );
});
However, for some reason, live will work as I expect -- whereas on is failing me.
This isn't a question for "how can I make it work" because I have found that on will succeed (capture clicks) if I declare it inside the function(formToDisplay) callback.
My question is: what is wrong with on that it isn't finding my dynamically created elements within a modal popup? My jQuery instance is jquery-1.7.2. jQueryUI is 1.8.21.
Here are two jsFiddles that approximate the issue. Click the word "Test" in both instances to see the different behavior. The only difference in code is replacing on for live.
Where the click is captured by live.
Where the click is NOT captured by on (click 'Test - click me' to see nothing happen).
I realize I may just be using on inappropriately or asking it to do something that was not intended but I want to know why it is not working (but if you have something terribly clever, feel free to share). Thanks for your wisdom!
Update / Answer / Solution:
According to user 'undefined', the difference is that on is not delegated all the way from the top of the document object whereas live does/is.
As Claudio mentions, there are portions of the on documentation that reference dynamically created elements and that what you include in the $("") part of the query needs to exist at runtime.
Here is my new solution: Capture click events on my modal dialog, which, although it does not have any content when the event is created at runtime, will be able to find my content and element with special class that gets generated later.
$("#dialog").on("click", ".classThatExistsInFormToDisplay", function() {
... //(success! Event captured)
});
Thanks so much!
live delegates the event from document object, but on doesn't, if you want to delegate the event using on method, you should delegate the event from one of static parents of the element or document object:
$(document).on("click", ".clickHandle", function() {
alert("Content clicked");
});
The problem is that the element to which you attach the event has to exist.
You have to use on like this to capture clicks on p tags created dynamically
$("#existingContainerId").on("click", "p", function(){
alert( $(this).text() );
});
if you have no relevant existing container to use, you could use $("body") or $(document)
If selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.
When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next
Take a look to section Direct and delegated events here for more details
I need to do some action when render() method finished its work and appended all HTML elements to DOM.
How to subscribe to onRenderEnds event (there is no such event)?
Can I write my own event outside of slickgrid code and attach it to render() method?
There are some events "onScroll", "onViewportChanged" but they happened before render() finished (in some cases).
Update:
I write formatter for column:
formatter: function(row, cell, value, columnDef, dataContext){
return "<div class='operationList' data-my='" + myData + "'></div>";
}
When grid rendered (applying my formatter) i need to go through all ".operationList" divs and convert them to other constructions (based on data-my attribute). I need to replace ".operationList" divs with a complex structure with event handlers.
To answer on my own comment I've come up with the following hack. It may not be pretty but it seems to work.
Add the following line to the render() method just below renderRows(rendered);
function render() {
...
renderRows(rendered);
trigger(self.onRenderCompleted, {}); // fire when rendering is done
...
}
Add a new event handler to the public API:
"onRenderCompleted": new Slick.Event(),
Bind to the new event in your code:
grid.onRenderCompleted.subscribe(function() {
console.log('onRenderCompleted');
});
The basic answer is DON'T !
What you are proposing is a very bad design and goes against the core principles and architecture of SlickGrid.
You will end up doing a lot of redundant work and negating most of the performance advantages of SlickGrid. The grid will create and remove row DOM nodes on the fly as you scroll and do it either synchronously or asynchronously depending on which one suits best at the time. If you must have rich interactive content in the cells, use custom cell renderers and delegate all event handling to the grid level using its provided events such as onClick. If the content of the cell absolutely cannot be created using renderer, use async post-rendering - http://mleibman.github.com/SlickGrid/examples/example10-async-post-render.html. Even so, the grid content should not have any event listeners registered directly to the DOM nodes.
To address #magiconair's comment, you really shouldn't render a whole SELECT with all its options and event handlers until a cell switches into edit mode.
I use
$(window).bind( ... )
to set up event handlers, but for some reason I keep losing event handlers (i think).
Is there any way when debugging (firebug) to see which custom events have been added to a given element?
Yours
Andreas
All events bound by jQuery (e.g not inline events) can be accessed through .data
var $el = $('#someId');
var allEvents = $.data( $el , "events" );
or
$('#someId').data('events');
its very rare I bind events to the window object but the same notion should still apply so try $(window).data('events')
This does indeed work demo here (writes to console so use firefox + firebug)