Develop Reference

Prevent Body Scroll on Anchor Link but keep Anchor Link Action

I'm using a Visual Composer Wordpress Shortcode to generate an Accordion. When I click on the tabpanels there is an anchor link which is linked to the panel body and opens it, however the body scrolls to the anchor link but I want to prevent the scrolling. I've already tried everything I could find such as
$('body, html').stop();
preventDefault();
return false;
stopPropagation();/stopImmediatePropagation();
However, after some trying around the only thing that is working right now, is the following code:
jQuery(document).ready(function($){
$('#product-accordion .vc_tta-panel-title a').on('click', function(){
e.preventDefault();
});
});
Well, with this "solution" I'm getting an error, of course, for undefined e, on every click. But I can't quite understand why it would work like I want that way.
Can anyone help me and find a solution which will work error-free?

You can try stopImmediatePropagation instead preventDefault.
jQuery(document).ready(function($){
$('#product-accordion .vc_tta-panel-title a').on('click', function(e){
e.stopImmediatePropagation();
});
});

Jquery don't focus in disqus div

I use disqus in my news site for comments, i put disqus div as display:none, i want that the user have to do click in a button for show and hide this div.
I did a script in jQuery doing toggle in this button, and I can hide and show the div, but when it shows, does not focus on the div, but this is where the button.
This is not useful since pressing the button should take the user to the section where comment, but does not.
script:
$(document).ready(function(){
$('.gn-icon-bubble').attr("href","#foot").click(function(){
$('.disqus_thread').toggle('swing');
});
});
.gn-icon-bubble is the button and as you know, .disqus-thread is the div's class; #foot is my anchor, are in the main page's footer, but still don't works.
I've tried using anchors, but gives the same, still focus comments. I really appreciate your help.

Use Event Delegation for dynamically change element ,use preventDefault to stop default action
$(document).ready(function(){
$('.gn-icon-bubble').attr("href","#foot");
$(document).on("click", ".gn-icon-bubble[href=#foot]" , function(event){
// event.preventDefault(); If you want to stop default anchor tag click action
$('.disqus_thread').toggle('swing');
});
});

Try this:
$('.gn-icon-bubble').click(function() {
$('.disqus_thread').toggle('swing',function() {
$('#foot').focus();
});
return false;
});

How to invoke a 'click' when user clicks on href

I'm trying to fire an alert when a user clicks on an anchor tag, but the alert is not being fired. The code I am trying is below.
http://jsfiddle.net/NLdTJ/
<a id="collapse"> Collapse</a>
$(function(){
$('#collapse').click(function(){
alert('here');
});
});

Your code is ok, but you weren't loading jQuery in your fiddle.
http://jsfiddle.net/NLdTJ/3/
$(function(){
$('#collapse').click(function(){
alert('here');
});
});
P.S.:
I've attached your code again because SO didn't let me post the answer with just a link to jsfiddle and no code :)

You need to have a href before a tags become hyperlinks. Otherwise they are just anchors. TO fix it you should do the following:
<a id="collapse" href="#"> Collapse</a>
$(function(){
$('#collapse').click(function(){
alert('here');
});
});
Hope that helps.
(I also assumed jQuery, but your fiddle was set up with mooTools, not sure if it was on purpose. Here is my fix: http://jsfiddle.net/NLdTJ/13/)

Make sure you prevent the default click behaviour of a link.
$(function(){
$('#collapse').click(function(e){
e.preventDefault();
alert('here');
});
});
Working sample : http://jsfiddle.net/NLdTJ/15/

<a id="collapse" href="#" onclick="alert('here');"> Collapse</a>

It should work fine, just change the framework on JSFiddle to include JQuery and run on DOMReady

There's absolutely nothing wrong with your code. It will work when you pick a jQuery library from the Framework options on the left side of jsFiddle.
Updated fiddle to include framework.

How to trigger the default action/event of a HTML link (anchor element)?

How could one trigger the default action/event of a HTML link (anchor element)? That is to use JavaScript/jQuery to "click" an existing HTML link, as if the user has clicked it.
Just using .click() does not seem to work.
$('#alink').click();
// the nothing happening
For this HTML:
<a id="alink" href="http://google.com" target="_blank">a link</a>
Example fiddle: http://jsfiddle.net/dCfD8/
I'd rather not create a new window in JavaScript (and take care of whatever else needs to be handled when a link is clicked).

You can trigger the click event using a simple trigger method in jQuery.
$('#alink').trigger('click');
Beware though, that even in the event gets fired, the browser will not follow the link href. The only way to follow the href is to actually click it with the mouse yourself.
As far as I know, there is no way to force a link to behave as if it were clicked. You have to change the document location or something like that to actually navigate between pages.

Expanding on Fabio Cicerchia's comment to his own post: You can use window.open:
var link = $('#alink');
var target = link.attr("target");
window.open(link.attr("href"), target ? target : "_self");

<script src='jquery lib source' ></script>
<script>
function force()
{ ...do something...to fill page2
$('#gopage2').trigger('submit');
}
</script>
<form action='#page2' id='gopage2'>
</form>
...
<span name='#page2'>This is page2</span>

try this:
$('#alink').trigger('click');

jQuery Class selector not working

I'm struggling to make an alert come up when an anchor tag with a specific class is clicked inside of a div.
My html section in question looks like this...
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
The jQuery section is as follows..
$('.bar').click(function()
{
alert("CLICKED");
});
My problem is that I cannot get this alert to come up, I think that I'm properly selecting the class "next", but it won't pick it up for some reason. I've also tried almost everything on this page but nothing is working. If I don't try to specify the anchor tag i.e. $('#foo').click(function()... then it works, but there will be multiple anchor tags within this div, so simply having the alert executed when the div is clicked won't work for what I need. The website this is on is a search engine using ajax to send information to do_search.php. Within the do_search.php I make pagination decisions based on how many results are found, and if applicable, a next, previous, last, and first link may be made and echoed.
EDIT: I just figured it out, it was my placement of the .next function, since it wasn't created on the initial document load but instead after a result had been returned, I moved the .next function to the success part of the ajax function since that is where the buttons will be created if they need to be, now it works.

Try using the live() command:
$(".bar").live("click", function(){ alert(); });
Because you load your button via AJAX, the click event isn't binded to it. If you use the live() command, it will automatically bind events to all elements created after the page has loaded.
More details, here

.live is now deprecated and is the selected answer for this. The answer is in the comments in the selected answer above. Here is the solution that resolved it for me:
$(document).on('click','.bar', function() { alert(); });
Thanks to #Blazemonger for the fix.

You surely missed $(document).ready(). Your code should be:
$(document).ready(function(){
$('.bar').click(function()
{
alert("CLICKED");
});
});
Hope this helps. Cheers

Make sure you have included JQuery Library properly.
Make sure your script has written between $(document).ready() in short $(function(){ });
Demo : http://jsfiddle.net/W9PXG/1/
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
$(function(){
$('a.bar').click(function()
{
alert("CLICKED");
});
});