Develop Reference

jQuery: How can I capture event from one element and assign it to a different element?

I have the following HTML
<a class="link" href="#">Link</a>
<button class="btn">
BUTTON
</button>
<p class="hidden">This is a paragraph</p>
and the jQuery
$(document).ready(function(){
$('.link').on('click', function(){
displayText();
});
function displayText(){
$('p').show();
}
});
The link when clicked displays the <p> tag. I want to capture the link event and assign it to the button. Any suggestions?
UPDATE:
What I am looking for is to capture the event on a link and stop it, show a dialog box and assign the event to a button on the dialog box.
JSFiddle: https://jsfiddle.net/0ct4r7y0/

You can trigger click on button with the event from a.link whenever link is clicked like this
$('.link').on('click', function(event){
displayText();
console.log(event);
$('button').trigger('click', event);
});
// to test that the event is passing properly
$('button').on('click', function(event, originalEvent){
console.log(event, originalEvent);
//originalEvent.target === <a class="link"></a>
//event.target === <button></button>
});
Note that the originalEvent there in button click handler is the event that was passed from a.link's click.

May be you just can rebind that event(function) as another dom while you find the listeners on the dom which you want to capture, and hope Visual Event can help you

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

Prevent click on outer li while clicking on inner link

I have some lis including a links as below
<li>
<span>SomeText</span>
<a href='someurl' class='entityDetailModal'>sometext</a>
</li>
I am using a third party library ('LightGallery') that adds click event on Li, and by Jquery I have add click event to the links to show a dialog.
The problem is when I click on link both click event will be fired,
my click event handler is
$('body').on("click", 'a.entityDetailModal', function (event) {
event.preventDefault();
event.stopPropagation();
loadDialog(this, event, '#mainContainer', true, true, false);
return false;
});
I tried event.stopPropagation() and event.preventDefault(); and return false; in link onclick event handler but they don't work.
Sample:http://jsfiddle.net/HuKab/30/
How can I overcome this?
Update
It seems the problem is the way I add click event handler,
using this way it seems that everything is ok
$('a.entityDetailModal').click(function (event) {
event.preventDefault();
event.stopPropagation();
loadDialog(this, event, '#mainContainer', true, true, false);
return false;
});
Update 2
Thanks #Huangism, this post stackoverflow.com/questions/16492254/pros-and-cons-of-using-e-stoppropagation-to-prevent-event-bubbling is explaining the reason.

Use stopPropagation(); in child element
$("li").click(function (e) {
alert("li");
});
$("a").click(function (e) {
e.preventDefault(); // stop the default action if u need
e.stopPropagation();
alert("a");
});
DEMO

It is not very clear to me what your problem really is. If you simply want to get rid of the click on the li tag you may use .unbind() from jQuery (see: http://api.jquery.com/unbind/). You should end up with only your click event.
Another thing that might help is to use something like:
$("a").on('click.myContext', function(event) {
//Your action goes here
}
This way you can have parallel events and turn them on with $("a").on('click.myContext') and off with $("a").off('click.myContext')
Edit: Use:
$("a").on('click.myContext',function (e) {
e.stopPropagation();
alert("a");
});
see working example: http://jsfiddle.net/bGBLz/4/

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.

click on link should not trigger parental onclick-event

I've got the following code:
<div onclick="alert('div event');" style="cursor:pointer">
some text
click
</div>
When somebody clicks on the link the javaschipt event is triggered. I want that the event is only triggers if somebody clicks on the text or on the empty space inside the div container; and not if somebody clicks on the link.
Is it possible to call a function when the event is triggered, which checks on which elements the user has clicked. something link
onclick="foo(caller);"
and
function foo(element){
if(element!='link'){
alert('yes');
}
}

Add a click handler to your link and stop event bubbleing to the parent div. Like this:
$('#link').click(function(e) {
e.stopPropagation();
});

$(function (){
$('#link').click(function (e){ e.stopPropagation(); /*do other thing*/});
})

OnClick event you can pass the current object type.
something like
onclick=foo(this)
The function foo looks like
function foo(obj) {
if(obj.tagName != 'A') {
alert('Yes')
}
}

Use the unbind http://api.jquery.com/unbind/