I make an element in jQuery plugin:
this.addButton = $("<a>", {
text: "ADD",
"class": "addButton"
}).appendTo(this.element);
Then i add live functionality:
this.addButton.live("click", function() {
that.somefunction("addSomething");
});
And it isn't working.
IF i change "live" to "bind" it works OR when i do:
$('.addButton').live("click", function() {
that.somefunction("addSomething");
});
it works too. But why adding live to an dynamically added element doesn't work?
Any ideas?
live() needs to examine the event on a parent element to work. The way you have set it up, the event can not propagate to any parent element.
Because of the way live() works:
The .live() method is able to affect elements that have not yet been
added to the DOM through the use of event delegation: a handler bound
to an ancestor element is responsible for events that are triggered on
its descendants. The handler passed to .live() is never bound to an
element; instead, .live() binds a special handler to the root of the
DOM tree. In the example above, when the new element is clicked, the
following steps occur: A click event is generated and passed to the
for handling. No handler is directly bound to the , so the
event bubbles up the DOM tree. The event bubbles up until it reaches
the root of the tree, which is where .live() binds its special
handlers by default.
* As of jQuery 1.4, event bubbling can optionally stop at a DOM
element "context". The special click handler bound by .live()
executes. This handler tests the target of the event object to see
whether it should continue. This test is performed by checking if
$(event.target).closest(".clickme") is able to locate a matching
element. If a matching element is found, the original handler is
called on it. Because the test in step 5 is not performed until the
event occurs, elements can be added at any time and still respond to
events.
lives doesn't bind an event to an object, it attach a listener to the window and then when the events bubble ups it checks for the original target. So you don't add it to the new object.
Related
I'm using a RadComboBox in the load on demand (lazy) mode with a web service.
I'm using a client side item template of this form: <input type='checkbox' id='cb_#= Value #'/><span>#= Text #</span> (adding a checkbox before each item's text)
In the itemDataBound client side handler for this RadComboBox I'm retrieving the particular item's DOM element and the nested checkbox'es DOM element and adding a click handler function for each of them (using jquery's $(element).click(function() {})).
The click handler functions work fine until I scroll the items out of view and then scroll back, after that the click handlers are not called anymore (the checkbox selection is also lost).
I suppose this is because the DOM elements representing the items get re-created as they are scrolled in and out of view. But the itemDataBound event is raised only once and is not raised again when an item is scrolled back in view.
The only workaround I can think of is to use the onclick attribute in the HTML and reference a global function from there, but this is ugly.
Is there a nicer solution for this then using the onclick attribute?
What it does actually it appends to innerHtml of the list element, but this is effectively re-moving and re-adding every node under the list element.
I worked around this by assigning my click hander and doing the databiding in the itemsRequested client side handler, iterating over the entire list of items obtained with the get_items() method of the RadCombobBox client side object.
itemsRequested is called every time after new items are added to the list and therefore every time after the DOM is re-created.
I'm building a GWT application with a Tree.
Every tree items represent an object which has a boolean attribute that we can set through a checkbox displayed in the tree item itself.
I have a selection handler to do some stuff on my tree which gets called on click on every tree items.
What I want to do, is to prevent selection event to firing up when I'm clicking on the checkboxes ...
However, checkboxes don't have a SelectionHandler, so I tried to put a ClickEventHandler with event.stopPropagation(), but SelectionHandler is still getting called ...
EDIT: actually SelectionHandler is getting fired before ClickEventHandler anyway ...
Thanks in advance
You might consider following this method provided in the GWT documentation here. That should do the bit what you are interested in.
Try using the separate click handler for the checkbox and use the event.StopProgation() there after inorder to prevent the event bubbling.
For stop propagation from child's event to parent in GWT you need to use
event.stopPropagation();
For example, I have registered a proxy event on an element
Do something
Say I have a reference to this element (e.g. from event.node inside the event handler), how can I remove/unsubscribe "doSomething" from just this specific element? (I still want to keep this event for other elements)
I am using cell editing in jqgrid and for that, i am using many different jqgrid events, as mentioned below ...
1) beforeSelectRow, 2)beforeEditCell, 3)afterEditCell, 4)onCellSelect, 5)ondblClickRow, etc...
Now, when i doubleClick on any of the row, the beforeselectRow code gets executed first.. which i want to prevent... but how to do that ??
Some example code is as below :-
ondblClickRow: function(id,irow,icol,e)
{
........
},
beforeSelectRow : function(rowid, e)
{
if(rowid==lastSelected)
{
$sampleDialog.dialog('open');
}
}
Different web browsers process the double-click event in a little different ways. So in general you can't prevent 'click' event before 'dblclick'. The callback beforeSelectRow will be called inside of click enevt handler defined inside of jqGrid code. In jQuery documentation of dblclick event handler you can read the following (see here):
It is inadvisable to bind handlers to both the click and dblclick
events for the same element. The sequence of events triggered varies
from browser to browser, with some receiving two click events before
the dblclick and others only one. Double-click sensitivity (maximum
time between clicks that is detected as a double click) can vary by
operating system and browser, and is often user-configurable.
What you currently do is just not recommended way to binding both 'click' and 'dblclick' handles.
You don't describe the original problem which you has which is probably somewhere inside of ondblClickRow callback implementation. The only solution will be to examine reorganization of the program to have no collisions between the actions inside of beforeSelectRow and ondblClickRow callbacks.
The onBrowserEvent method of an abstract cell returns a parent element.
If I have multiple HTML items rendered within the cell, such as spans or divs, how do I get and distinguish which one triggered the event?
NativeEvent#getEventTarget() will give you the exact element that fired the event. You can then walk up until you find an element with some discriminant (e.g. a specific CSS class name), or walk down from the parent element and use Element#isOrHasChild().
Have a look at how CompositeCell dispatches the event to the appropriate cell,or how ButtonCell checks that you clicked the button inside the cell.