We Keep Coding

Use one() in inline onclick attribute

I have a function that is triggered on an inline onclick.
What I want is for that function to get called only once but don't know how to do that with an inline onclick. It's working at the moment but runs everytime the user clicks rather than just once.
This is how I have it:
HTML
<div class= "container" onclick="modal('#modal')"></div>
I have tried having it as a Jquery function as follows and remove the above click but that is not working either:
$(".container").on( "click", modal( '#modal') {
alert( "The event happened!" );
});
Any idea how to make it so the function only runs once?
Thank you

If you wish to use jQuery's one(), you'll need to remove the onclick from the HTML, and change the JS to read:
$( ".container" ).one( "click", function() {
alert( "The event happened!" );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class= "container">Container</div>
This way, the alert() will only show on the first click.
If you wish to use the on() as stated in your question, use $(this).off('click'); to remove the event listener after the fist press:
$( ".container" ).on( "click", function() {
alert( "The event happened!" );
$(this).off('click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class= "container">Container</div>

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." );
});

jquery DOM mutation

I have made this:
<span class="a">test 1</span><div></div>
Why .b does not activate the alert?
$( ".a" ).click(function() {
$('div').html('<span class="b">test 2</span>');
});
$( ".b" ).click(function() {
alert("Hello");
});
I do not understand how to detect the mutation of the DOM.

since .b is created after the query was done. when you call $(".b") in your script nothing is found, and the click event is not attached to it. You can solve it by attaching the event to the document like so:
$(document).on("click", ".b", function () {
alert("hello");
});

The click() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on().
$('div').on("click", ".b", function () {
alert("hello");
});

The selector runs on execution, meaning that .b was already searched for when the page loaded, rather than after you added the dom.
To demonstrate how selectors run in line, the code works if you define it right after appending the element:
$( ".a" ).click(function() {
$('div').html('<span class="b">test 2</span>');
$( ".b" ).click(function() {
alert("Hello");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="a">test 1</span><div></div>
However, the correct way of doing this would be to define a parent-based selector. The following is setting a click event to the parent that filters the target for the .b selector.
$( ".a" ).click(function() {
$('div').html('<span class="b">test 2</span>');
});
$(document.body).on("click", ".b", function () {
alert("Hello");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="a">test 1</span><div></div>

JQuery Load Page into Div ... How to access external div with jquery

I am loading a page into a div like this:
<script type="text/javascript">
$(document).ready(function(){
$("#siteloader").html('<object data="http://mysite/form1.php" />');
$( "#myform" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
});
</script>
I can see with firefox that the page loaded is on a frame.
My question is, how can I access anything on the loaded page with jquery ?

You can try using jQuery .load() to do the same thing but only return the element that you need and not withing a frame. Jquery .load But to answer your question try using the .contents() to get the information you need. jQuery .contents
$('#siteloader').load("mysite/form1.php")
.success(function(){
$( "#myform" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
})
EDIT: added code

add click event to Jquery UI accordian Header

When you create a Jquery UI accordian you get a bunch of headers, that when you click them a div opens. However, I would like to preform an additional action upon clicking the header.
How do i do this?
Any ideas?
Thanks!

Javascript
$("#CreateNewUserHeader").click(function() {
alert("test");
});
html
<h3 id = "CreateNewUserHeader"><a >Create New User</a></h3>
<div>some stuff</div>

You need to wrap your code in ready handler:
$(function(){
$("#CreateNewUserHeader").click(function() {
alert("test");
});
});
Also make sure that you do not assign same id to more than one elements.

What I've done when I needed to do this in the past was something like this:
$('#accordion h3 a').bind('click', function (e) {
// bind to the the header / anchor clicks
if (!condition) {
e.preventDefault();
e.stopPropagation();
}
});

You guys should read the documentation, there is an event handler that will do it all for you.
https://api.jqueryui.com/accordion/#event-activate
$( ".selector" ).accordion({
activate: function( event, ui ) {}
});