We Keep Coding

What Event to Delegate by Javascript function when I jump to my bookmarked id using link?

I have a link , which has a href of "#myid", which is h1 (let say). I want some javascript function to get run when my h1 is focused i.e. 'jumped to' by link. I tried onfocus() but its not working. I am more a middle & data tier developer, so finding a bit weird working in deep with front end languages :)

There is a hashchange event you can listen for on window:
window.addEventListener('hashchange', (e) => {
console.log(e.newURL);
});
.padding {
height: 1000px;
}
click
<div class="padding"></div>
<div id="myid">myid<br>myid</div>

you can run javascript function while hover or focus by using jquery. Please refer the code below.
$( "h1" ).hover(function() {
alert( "Handler for .focus() called." );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>This is a sample H1</h1>
Focus function is used for input field.you can only handle focus for h1 using tab index.
$( "h1" ).focus(function() {
alert( "Handler for .focus() called." );
});

Content Editable inside a carousel causing the event propagation

I am creating a editable div dynamically with the following line.
<div class='reflection-field' contenteditable="true" data-number="${index}"></div>
Expected: When I click on the rendered div, i expect it to show the cursor at the start.
Issue: This div is inside of a "Slide" div of a Carousel. So, when I click on this content editable div, it propagates the event and activates the event to the parent carousel which activates the "grab slide" event. This leads to a "Move" mouse pointer and NO cursor inside the editable.
I am using jQuery & owl Carousel 2 in this project.
$(".reflection-field").click(function( event ) {
event.stopPropagation();
});
and this
$(".owl-carousel").on("click",".reflection-field", function( event ) {
event.stopPropagation();
propStopped( event )
});
function propStopped( event ) {
if ( event.isPropagationStopped() ) {
console.log("called");
} else {
console.log("not called");
}
}
//called
But, its not happening. Will really appreciate the help.
jsfiddle: https://jsfiddle.net/pr2wn6ug/

Ok, here is the deal.
The "mousedown" evokes the grab in the Owl-Carousel-2.
So this made it work
$(".reflection-field").on("click tap mousedown", function( event ) {
event.stopPropagation();
});

We can intentionally enable or disable draggable feature at run-time. Below code will work for Owl-Carousel and other similar problem:
$(".reflection-field").draggable()
.click(function() {
$(this).draggable({ disabled: false });
}).dblclick(function() {
$(this).draggable({ disabled: true });
});
Don't forget to add jQuery-ui library to make it work.
​

Jquery click event targeting more than one element

Codepen is here
I have two triggers on an image. General behaviour:
When I click a trigger, it should reveal a small context box (got this working)
When I click outside of the context box OR the trigger, it should disappear (got this working)
When I click another trigger, if there is another trigger/context box that is already active/open, it should close the other one and open the recently click one (not working)
Here's the html:
<span class='pulse-button' id="button-1"></span>
<div class="content-box context-closed tabs" id="tabs1">
</div>
Here's my jQuery:
$(function(){
$(".pulse-button").click(function(e){
e.stopPropagation();
if( $(".pulse-button").not(this).hasClass("pulse-button-active")){
$(".pulse-button").not(this).removeClass("pulse-button-active");
$(".pulse-button").not(this).next().addClass("context-closed");
}else{
$(this).addClass("pulse-button-active");
$(this).next().removeClass("context-closed");
};
});
$("body").click(function(evt){
if(evt.target.class == "content-box")
return;
if($(evt.target).closest('.content-box').length)
return;
if( $(".pulse-button").hasClass("pulse-button-active")){
$(".pulse-button").removeClass("pulse-button-active");
$(".pulse-button").next().addClass("context-closed");
};
});
$( "#tabs1,#tabs2" ).tabs();
});
What could I be doing wrong here?

You don't need the else in your .pulse-button click. Because the code in else block should be executed either any .pulse-button has class pulse-button-active or not. Change the your click event like following.
$(".pulse-button").click(function(e){
e.stopPropagation();
if($(".pulse-button").not(this).hasClass("pulse-button-active")) {
$(".pulse-button").not(this).removeClass("pulse-button-active");
$(".pulse-button").not(this).next().addClass("context-closed");
}
$(this).addClass("pulse-button-active");
$(this).next().removeClass("context-closed");
});
UPDATED PEN

Prevent parent click from firing if a specific child is click

I want to prevent my parent click method to fire if the user clicks on a specific child element.
Example html:
<div data-type="parent_holder" style="width:500px; height:500px;">
<div data-type="child_holder" style="width:50px; height:50px; position:absolute;">
click
</div>
</div>
Example js:
I use jquery on in my js because I attach the element dynamically to a sortable list.
$( "#sortable" ).on( "click", "[data-type=parent_holder]", function() {
alert('parent');
});
$( "#sortable" ).on( "click", "[data-type=child_holder]", function() {
alert('child');
});
So what I want is, when a user clicks on the parent_holder it should alert parent, but if the user clicks on the child_holder it should alert child, and not alert parent.
I have searched stackoverflow and I have tried many of the suggestions, like :not(), bubbling, stopPropagation(), but I can't seem to get the right result.

Sounds like event propagation is happening in your case,
just avoid that by using event.stopPropagation()
Try,
$( "#sortable" ).on( "click", "[data-type=child_holder]", function(e) {
e.stopPropagation();
alert('child');
});
DEMO

Use:
e.stopPropagation();
or
return false;
in child click handler to prevent event propagation from parent events.

If for some reason you still need the click event to bubble from child element, you could filter instead the target inside parent click handler:
$( "#sortable" ).on( "click", "[data-type=parent_holder]", function(e) {
if(!$(e.target).is('[data-type=parent_holder]')) return;
alert('parent');
});
--DEMO--

How to clear effect of a click button using jquery

I am doing something as shown bellow:
$("#btn1").click(function(){
$('<div></div>').appendTo('body');
});
It appends the division again and again when I click it, but what I want is when I click other button then there should be no effect of "btn1" means I want to clear the effect of first button after I click the second one.
How I can do this?

Why not add a class to the div that btn1 adds:
$("#btn1").click(function() {
$("<div class='new-div'></div>").appendTo('body');
});
Then you second button can remove it like so -
$("#btn2").click(function() {
$(".new-div").remove();
});

When you click first button it append's div tag into body
$("#btn1").click(function(){
$('div').appendTo('body');
});
then when you click second button it remove the div tag from the body and clears the previous one
$("#btn2").click(function(){
$('body').children("div").remove();
});

i guess you want to disable the event of #btn1 on first click
$('#btn1").unbind('click');
this will clear the registered click event with that button

http://api.jquery.com/click/ says about .click: "This method is a shortcut for .on( "click", handler )". So you'll need .off (http://api.jquery.com/off/) to clear the event handler.

Well the simplest thing would be a flag:
var btn_is_active = true; // set flag's initial state
$( "#btn1" ).click( function(){
if ( btn_is_active ){ // only perform action if boolean is true
$( "<div></div>" ).appendTo( "body" );
}
});
$( "#btn2" ).click( function(){
// toggle the boolean value
btn_is_active = !btn_is_active;
});
In the above example, #btn2 controls the flag; Each time #btn2 is clicked, the btn_is_active boolean is toggled from true to false and therefore enables/disables the functionality of #btn1.
In order to clear whatever action #btn1 has already done, you'll have to be able to track all the '<div></div>' elements that were added. For this you might want to give them a class attribute and then #btn2 could remove all the elements with that class attribute.