Develop Reference

Using "on" for response for desired elements only:

JS Fiddle Link
I am dynamically adding some elements and my div looks like:
<div class="knock" href="#">
<!-- Do Something if links are not clicked -->
Google
Facebook
</div>
And my on script is:
$(".knock").on("click", function(){
console.log("Link not clicked");
alert("Link not Clicked");
});
My Problem, I do not want to fire the alert when the links are clicked. Is there a way out?

You can write anchor tag event and stop event Propagation of the event to upper DOM elements so that alert only comes up when the div is actually clicked, but not when some anchor tag inside div is clicked:
$(".knock").on('click',"a",function(event){
event.stopPropagation();
})
FIDDLE:
http://jsfiddle.net/hbac7vbh/2/
event.stopPropagation:
The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.
See details here on jquery official page

Just determine if the a is clicked based on the event that is passed.
Updated Example
$(".knock").on("click", function(e){
if(!$(e.target).is('a')){
console.log("Link not clicked");
alert("Link not Clicked");
}
});

Add this to your js:
$(".knock a").on("click", function(e) {
return false;
});

Why not add another method as
$('a').on('click',function(e){
e.stopPropagation();
});
This will stop porpagation of the chaininvocation of events on parent elements.
See updated Fiddle

Disable HTML Link after it has been Clicked

I am trying to disable a link that submits my form after it has been clicked. This is needed to stop duplicate requests from the same user. Here is my code, but unfortunately it is not working.
<a id="submit-form-link" onclick="document.forms[0].submit()" class="next">Next <span>Step</span></a>
<script type="text/javascript">
$('#submit-form-link').click(function(){
$('submit-form-link', this).attr('style', 'pointer-events: none;');
});
</script>
I feel like I am close but it just is not working.

You're going about this wrong. Get rid of the inline onclick event handler and use this inside a document ready call:
$('#submit-form-link').one('click', function(){
$('form').submit();
});
This binds the click event to your link, but unbinds it after the first click.
You can see this in the console in this jsFiddle example. The first time you click the link it attempts to submit the form, but doesn't try on subsequent clicks.

Try this:
...
$('submit-form-link').off().click(function() { return false; });
...

<a id="submit-form-link" onclick="document.forms[0].submit()" class="next">Next <span>Step</span></a>
<script type="text/javascript">
$('#submit-form-link').click(function(){
if (!$(this).hasClass('disabled')) {
$('submit-form-link', this).attr('class', 'next disabled');
return true;
}
return false;
});
</script>
Here, you can create a class disabled and style it as you want. Just add this class after clicking the button so you will know that it is disabled. Then you return false to stop the event if the button was already clicked.

bind the click event again in the first click event callback function
$('#submit-form-link').click(function(){
$('submit-form-link', this).attr('style', 'pointer-events: none;');
$(this).click(function(e){e.preventDefault})
});

You have to remove the onclick attribute.
$('#submit-form-link').click(function(){
$(this).removeAttr('onclick');
});
Also, $('submit-form-link', this) is totally wrong. You are selecting nodes of type submit-form-link that are children of this. First of all you'd need #submit-form-link and second this is already a reference to the link node you just clicked.

Back button is not working in the browser if multipage is done in jQuery

I am working on jQuery. I want to display 2 divs in a same page but only one div has to get displayed when its link is clicked. and is there any condition to make the second div hidden and displaying the first div and when the link for the second div is clicked from the first page the page must load with the second div.
I have achieved it through this code:
<script type="text/javascript">
$(function() {
$("#login").hide();
$("#loginp").click(function(event){
$("#login").show();
$(".container").hide();
event.preventDefault();
});
});
</script>
but when i use the above code: back button in the browser fail to work. Please help or suggestions. thanks in advance.

Use toggle function for this like,
$(function() {
$("#login").hide();
$("#loginp").click(function(event){
$("#login, .container").toggle();
event.preventDefault();
});
});

You have a missing closing tag for doc ready handler:
<script type="text/javascript">
$(function() {
$("#login").hide();
$("#loginp").click(function(event){
$("#login").show();
$(".container").hide();
event.preventDefault();
});
}); //<-----------this one try putting it.
</script>

<A>nchor's href being overridden by containing <div>'s onclick

When I click on the following link inside the outer div, I get the confirm statement, but after clicking 'OK', nothing happens.
HTML:
<div onclick="toggleExerciseDetails($(this),true)" class="clickable">
...
<a target="_blank" href="http://iPUMPit.local/exercises/delete/275"
onclick="cancelPropagation(event);return confirm('Are you sure you want to delete this exercise?');"
title="Delete this exercise" class="icon icon_delete"></a>
</div>
JavaScript:
// cancels propagation of an event to the outer element event
function cancelPropagation(e) {
if (!e)
var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
Why isn't my click following the url?
Thanks :)

Use .stopPropagation():
$('div.clickable a').click(function(e) {
e.stopPropagation();
});​
jsFiddle example.
This will make your link clickable but not allow the event to bubble up to the div, while keeping the div clickable.

I had another click handler on .icons which returned false. My bad, guys! Thanks for the help!

jQuery how to set click on href in the div?

Good day,
I want to set click event on every anchor element in my div container. Here is an example what I want to do:
---HTML---
<div id="my-container">
page1
page2
page3
</div>
---- jQuery ----
$("#my-container a").click(function() {
var link = $(this).attr("href");
$("#my-container").load(link);
});
What I want to do is to let me handle loading event of href clicks and load it to the same container. And this is must done without id, class attributes which aren't available for that hrefs. The problem is in this: $("#my-container a"). Any help would be appreciated! Thanks
UPDATE
People doesn't seem to get right what I wanted to ask. I repeat myself again. $("#my-container a") <---- doesn't add click events on href anchors. So how I can set click event?

Try this, wasn't sure if you were missing any tags so I've put the whole thing in:
<script type="text/javascript">
$(document).ready(function(){
$("#my-container a").click(function(event) {
alert('test');
var link = $(this).attr("href");
$("#my-container").load(link);
event.preventDefault();
});
});
</script>

You forgot to quote the href string literal:
var link = $(this).attr("href");
^ ^
Also, you will need to cancel the default behavior of the click event. Currently, your event handler would fire, but you would not see the result, as the browser continues to follow the link you have clicked. Add a return false; as the last line of the event handling function to cancel this behavior.

Add return false;.
$("#my-container a").click(function() {
var link = $(this).attr("href");
$("#my-container").load(link);
return false;
});

You can do like:
$(function(){
$("#my-container > a").click(function() {
var link = $(this).attr('href');
$('#my-container').load(link);
return false;
});
});
But if you meant that you don't want to give the div any id or class then any div having links inside it will also be affected. So you should at least give the id to the div you want to load the content in.

Have you tried it with the bind function:
$("#my-container a").bind("click", function() {
var link = $(this).attr("href");
$("#my-container").load(link);
});