We Keep Coding

Angular ui sref not working with touch events

i have a link with ui-sref attribute and also a jQuery touch event, but the problem is that when i click on this element the jQuery handler is running but the ui-sref not.
Jquery:
$('#fa-bar, #mobile-nav li').on('touchstart', function( e ) {
e.stopPropagation();
$('#mobile-nav').toggleClass('toggle-mobile-nav');
$('#mobile-nav').toggleClass('prevent-scroll');
});
Html:
<li ui-sref="state" ui-sref-active="nav-active"><a>Link</a></li>

See the docs and this example:
However, stopEvent also calls an event object method, event.stopPropagation, which keeps the event from bubbling any further up into the DOM. Note that the table itself has an onclick event handler that ought to display a message when the table is clicked. But the stopEvent method has stopped propagation, and so after the data in the table is updated, the event phase is effectively ended, and an alert box is displayed to confirm this.
This is pure javascript and also applies for AngularJS. Your call to e.stopPropagation() prevents ui-router from getting the event. This is sometimes handy if you want to add an URL to something (so you can still use open-in-new-tab feature of your browser), but want a different behavior on normal clicks.

Use latest or atleast 0.3.2 for ui-router
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>

Anchor text that triggers onClick of a different element?

I have a page where content is spread over several tabs. The user clicks each tab (anchor inside an <li>) in order to switch. I would like to anchor some other text to trigger the onClick of a tab in order to also switch the content.
Is this possible with javascript/jquery?

Yes. You can invoke a click event on another element using jQuery's .click();
Trigger tab click
Where #tablink is the ID of the tab you want to trigger.
More info: http://api.jquery.com/click/

You can achieve that with Jquery which is simple and easy to use. what you can actually do is that , you can attach a event eg., click to a event handler, which would do the stuff like loading appropriate content on to your current tab.
well this can be achieved by attaching the event to the event handler using a selector. .on() function is used as per the latest jquery lib although .click() also would work but its advisable to use .on() as it handles event delegation as well.
Example:
$( ".tab a" ).on( "click", function() {
// load the appropriate content to the current clicked tab
});
REF:
http://api.jquery.com/on/
Jsfiddle to play with :
http://jsfiddle.net/dreamweiver/h4JXs/1732/
Happy Coding :)

change html preventDefault

I have a weird recursive situation.
I am changing some HTML inside a element with a small widget and HTML5 contenteditable.
I binded on that element some events such as:
$('.myelement).on('DOMNodeInserted DOMNodeRemoved DOMCharacterDataModified', ..
Those events trigger some AJAX call that on success also modifies the same element.
$('.myelement').html(new_value)
But the thing is, this also triggers those binded events on the element. And then i get a unstoppable ajax recursion.
Is it possible to do something like
$('.myelement').html(new_value).preventDefault()
as in, don't trigger any of the binded events triggers?

No.
Instead, you can unbind the handlers while you update the element, or set a flag while updating and check for that flag in the handler and do nothing.

Click on dynamically added link on KeyUp with jQuery

I use jQuery to add some HTML to the DOM. After the insertion I would like to create an eventhandler which is called on keyup and clicks on the link added to el. However, jQuery does not find the a element as it was added after loading the page.
var el = $("#name");
// add content to el
$(document).keyup(function(e) {
el.find('a').click();
});
How can I update the DOM in el? I know that there is on() (and its predecessors) in jQuery. However, they do not help me as the event is not registered on the added element itself, but on the document and another event just happens on the newly added element. Any ideas on how to solve this?

Thanks to the response of #Johan I was doing further debugging and found the solution:
el.find('a')[0].click();
So the real problem was not the changing DOM but the click() event that apparently can only be applied to a single element and not to a list of only one element.
Some further discussion about click() not firing can be found here: Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?

How to call JS to click a table element

Assume I get a table element with ID="emTab", how do I call JS to click it?
Thanks.

document.getElementById("emTab").onclick = function() {
// your code goes here
};
See element.onclick
To trigger click event
document.getElementById("emTab").click();
See element.click
The click method is intended to be
used with INPUT elements of type
button, checkbox, radio, reset or
submit. Gecko does not implement the
click method on other elements that
might be expected to respond to
mouse–clicks such as links (A
elements), nor will it necessarily
fire the click event of other
elements.
Non–Gecko DOMs may behave differently.
When a click is used with elements
that support it (e.g. one of the INPUT
types listed above), it also fires the
element's click event which will
bubble up to elements higher up the
document tree (or event chain) and
fire their click events too. However,
bubbling of a click event will not
cause an A element to initiate
navigation as if a real mouse-click
had been received.
Cross browser way
If you can use jQuery then it would be
$("#emTab").trigger("click");

Firing events cross-browser - http://jehiah.cz/archive/firing-javascript-events-properly

its simple using JQuery
$('#emTab').click(functionToCall);
while in JS
document.getElementById('emTab').onclick = function() {};
for details on DOM events:
http://www.howtocreate.co.uk/tutorials/javascript/domevents