We Keep Coding

jQuery/Javascript - how do you prevent the currently clicked item from losing focus when another element offpage is updated

Suppose you have a div that is at the very top (usually offscreen, due to a long page) that is updated with .append() when any of a bunch of links (scrolling also offpage) is clicked. How do you prevent Chrome from scrolling to the top automatically after each of the link clicks?
Something like this
<div id="updateme"></div>
<img>
...
[hundreds more]

There are several ways to solve this, and it is because you are using an anchor hashtag (#).
<img>
Instead, you could remove the href altogether but I am betting you want the style that href gives you. I would recommend using css to style the a to look and act like a link (which is probably the cleanest method), but you can also do this if you like:
<img>
This could also be covered with a little javascript when the page finishes loading as well if desired, since you listed jquery, it could be something like:
$('a[href="#"]').on('click', function(e) {
e.preventDefault();
});
If going the above route, just in case these are dynamically loaded in, you might want something like:
$('#updateme').on('click', 'a[href="#"]', function(e) {
e.preventDefault();
});

I strongly assume that Chrome doesn't scroll to the top because you are updating the content of the updateme element, but because your link points to #, which acts like an anchor on top of the page.
Personally I'm not a big fan of using href="#", because it makes it possible to middle-click or Ctrl+click the link, opening it in a new tab, which is not an intended functionality. I prefer using href="javascript:", but maybe there is an even better way that I don't know about.
If you want to leave the link as it is, to prevent Chrome from scrolling up when clicking the link, you have to make sure that only the click handler is run when you click the link, and Chrome doesn't actually navigate to the href you have specified, use onclick="event.preventDefault(); DoAppendUpdateMe()" (see preventDefault).

Trying to execute a event with javascript on an <a> element

The reason i need to execute the event behind a a element is because i'm working on some kind of autologin, however one of the sites it has to work with is https://create.kahoot.it/#login?a=1&next= the problem is, their login uses an a element for the sign in button, however when i select that element and execute a .click on it it simply doesn't do the same thing as to what happens when a user clicks on it.
I hope someone could answer this question since i couldn't find anything close to this issue anywhere.
Also for the convenience of whoever helps, to select the element from the console you could use:
document.getElementById('sign-in').getElementsByTagName('a')[1];
The way to solve this issue has to be either javascript or JQuery, preferably just plain javascript.

Try this:
document.getElementsByClassName('btn register')[0].click();
This basically is selecting the anchor by its class name and fire click event manually.
UPDATE:
Alright I did some more research and it seems there is another way of triggering that click handler and it is to set href on the window:
var a = document.getElementsByClassName('btn register')[1];
window.location.href = a.href;
I've tried it and seems it is doing the job.

Create a link dynamically, click it and destroy it, possible?

I made some brackets for a tournament and I'm using Owl carousel to serve videos on each clicked match.
The problem I've been trying to solve is this: Create a link after each click on a match, have this link clicked (by itself) which will, in turn, activate a certain slide in the carousel. Unfortunately that's the only way this could be made to work, because the Owl carousel needs links for callbacks. It's something like in this fiddle: http://jsfiddle.net/EwFMn/9/ except that in my example I have the brackets loaded below.
Now (after searching for a solution and trying every method suggested here in other questions on SO) I couldn't find a way to get a link which was appended to a div to be clicked too immediately after being created. What I get is this: on clicking a match, a link is created which needs to be clicked separately to get the behaviour I described above.
I have tried all the methods which use
on('click', selector-to-your-element , function() { ... });
as well as simply:
$('.something').click();
as well as other methods using live and delegate. None of the solutions proposed on other similar questions on SO worked. It seems as if at the time when the click event is triggered jQuery doesn't find the link it has just created to click it, so the link only works after you click it manualy.
The problem is I need this to not only work on one single click but also I need this link to get destroyed after it automatically gets clicked. I'm not even sure this is possible with jQuery. I'm curious if anyone has a working solution for this.

You can't trigger the href with a javascript click event. You need to do something like this:
$('.button').on('click',function(){
location.href=$(this).attr('href');
});
$("[href=#seven]").trigger('click');

What is meant by javascript:// in the href of a link

Yesterday, I visited a forum. There was like and Dislike button under the each post. When I click the Like button, the Like was counted without any page reload. Meaning Ajax was working, but when I check the href of that like link that was like this:
<img src="dbtech/thanks/images/likes.png" alt="Likes" title="Likes"> Like
I have also checked (using Visual Event) that there is no event listener attached to that link. So, I cant understand that how it works. Can some one explain?

javascript: return 0;
Does the same thing.
This would just uselessly create a random regular expression literal and then discard it. It is probably some programmer's ignorance.
This is included because an a tag has to have an href.

On its own, a link with href="javascript://" does nothing at all when clicked. This is as opposed to a link with href="#", which will set the anchor of the current location to #, or a blank or unset href, which will cause navigation to the current page.
In this case, since there's no explicit onclick handler and no event handler attached to this link, there must be some a event handler at a higher level that's catching click events as they bubble up to the page. Without being able to see the site, it's impossible to say for sure how it's working, but my guess would be that the data-button="likes" attribute is involved here.

Linking i DIV, handing over the "geturl" event to the browser

Ok, so this is a bit complicated. I have something like this code:
<div> Hello, I'm inside a DIV, please <a href='foo'>click here</a></div>
And I want to bind a click event to the DIV that follows the link of the contained A. No worries, this I can do all by myself, but the only method I know of is using "top.location", which bypasses the browsers normal handling of the link
In a nutshell, if I do it this way, if I hold my alt-key pressed when I click the DIV, the link won't open in a new tab, which is the behaviour in my browser.
Any ideas what so ever to handle this? I can't pre-code this new tab/new window behaviour since its user-configurable.

Try this:
$("a").trigger("click");
To open it in a new tab, you could set an attribute target="_blank" before triggering the event.

It isn't possible to trigger the browser's default handling of a link. The click() method (or jQuery equivalent) only runs the event handlers associated with a link; it does not follow the link, much less allow shift-click, middle-click, right-click-bookmark and so on.
To get the full behaviour of a link, you will need a real link. Wrap the contents of the following <div> in a new <a> with href pointing to the same place. Then if you need to, style the link so that it doesn't look like a link.