We Keep Coding

Load dynamic data on <a href="url_of_data"> click

I'm currently loading my page data dynamically clicking on an element like this:
<a onclick="load('url_of_data')">Some Text</a>
But for a better UX I now want to have an element like this:
Some Text&
and then just use preventDefault like this;
$("a").click(function(e){
var self = $(this);
var href = self.attr('href');
e.preventDefault();
load(href);
});
I got this code from this question.
But it does not work, the site is still reloading and not running the function.
I now apply the click handler everytime the dynamic content was loaded and it works fine.

You need to add return false at the end of your function
$("a").click(function(e){
var self = $(this);
var href = self.attr('href');
e.preventDefault();
load(href);
return false;
});

You will need to specify the container div to which the content will be loaded into.
$("a").click(function(e){
var self = $(this);
var href = self.attr('href');
e.preventDefault();
//Replace "self" with the container you want to load the content into, e.g. $("#myDiv").load(href);
self.load(href);
});

I Think this will make the work.
$('a').click((e) => {
e.preventDefault();
const href = $(e.currentTarget).attr('href');
window.location.href = href;
});

I just needed to reapply the click handler everytime the dynamic content was loaded.
Now it's working fine

$("a").click(function(e){
var self = $(this);
var href = self.attr('href');
window.location.assign(href);
});
It helps you

Remove parent and everything inside it?

I'm trying to use jQuery to remove a div and all of its content when a child div is clicked. To explain this, here is a working FIDDLE. Basically I need to remove the pDiv when the close button is clicked. So I tried this:
$('div').on('click', '.closeDiv', function () {
$(this).prev().remove();
$(this).remove();
$(this).parent().remove();
$('#upload-file').val("");
});
However this doesn't seem to delete the pDiv.
Please test the FIDDLE above buy adding an image and then click on the Green close button and then try to add another image and you will see that the previous pDiv hasn't been removed.
Could someone please advice on this issue?
Thanks in advance

The issue is because you call $(this).remove() before you try and do further DOM traversal on the element which no longer exists. Remove that line. Note that you can also just use closest() to find the required .pDiv element, then remove it, like this:
$('#thumbnail').on('click', '.closeDiv', function() {
$(this).closest('.pDiv').remove();
});
Also note that the code in your fiddle uses an odd mix of jQuery and native JS. You should stick to one or the other. You're also doing several processes which aren't needed, such as creating a canvas element. Try this:
jQuery(function($) {
var $thumbnail = $('#thumbnail').on('click', '.closeDiv', function() {
$(this).closest('.pDiv').remove();
$('#upload-file').val('');
});
var $fileDiv = $("#upload");
var $fileInput = $("#upload-file").on('change', function(e) {
var filesVAR = this.files;
showThumbnail(filesVAR);
});
function showThumbnail(files) {
var file = files[0]
var $pDiv = $('<div class="pDiv" />').appendTo($thumbnail);
var $image = $('<img class="imgKLIK5" />').appendTo($pDiv);
var $div = $('<div class="closeDiv">X</div>').appendTo($pDiv);
var reader = new FileReader()
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
}($image[0]))
var ret = reader.readAsDataURL(file);
}
});
Updated fiddle

try following and follow the comment i mentioned.
$(document).on('click', '.closeDiv', function () {
$(this).prev().remove(); // i don't know why you need this.. let us know your structure
//$(this).remove(); you don't need this line
$(this).parent().remove();
$('#upload-file').val("");
});
Please find the working Fiddle for this

Unbind a scroll function

After 5 seconds when a user scrolls to a specific section of a page, I'm collapsing a module (with Bootstrap). The problem is when you manually click the button to collapse again, this function still fires and I don't want that behavior.
Basically I want this function to fire only once after the user scrolls to that specific element on the page. How would I go about doing that?
$(window).on('scroll', function(){
var scroll = $(window).scrollTop();
var objectSelect = $('#whatsNextGhost');
var objectPosition = objectSelect.offset().top;
var collapseAccordion = function() {
if (scroll > objectPosition) {
$('#whatsNextSectionContent').collapse('hide');
}
};
setTimeout(collapseAccordion, 5000);
});

I've created a little fiddle for you:
https://jsfiddle.net/1j790jxb/
On scroll I simply log something to the console:
$(window).on('scroll',function(){
console.log('scroll attached');
});
When I hit a button (with ID button) I detach the scroll:
$('#button').on('click', function(event){
$(window).off('scroll');
});
As you can see in the Fiddle: after you click the button, nothing appears in the console anymore.
You might also want to take a look at: namespacing your (scroll) event and requestAnimationFrame:
https://api.jquery.com/event.namespace/
https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

You have to assign window to a variable so that it disengages the listener from the same instance of "window" you applied it to since your off handler is in a different context if it outside of the initializing closure.
ie:
$window = $('window');
$window.on('scroll', function(){
var scroll = $window.scrollTop();
var objectSelect = $('#whatsNextGhost');
var objectPosition = objectSelect.offset().top;
var collapseAccordion = function() {
if (scroll > objectPosition) {
$('#whatsNextSectionContent').collapse('hide');
}
};
setTimeout(collapseAccordion, 5000);
});
$window.off('scroll') // this goes inside whatever method you are using to remove the listener.
Edit: grammar

Javascript Menu - Scrolling/Content Jumping

I have created a nice little javascript menu, which purposely doesn't use data tags as I was having issued with html purifier conflicts (another, long story).
Anyway, after alot of tinkering, the functionality and styling works exactly as I wanted, but with one exception - when I click on each menu item, it opens the content at different points on the screen, seemingly depending on the amount of content. I want it to always open at the top, so that the menu is always visible, along with the top of the content, and you can then scroll down as you wish.
I've been trying to resolve this for a while, so would appreciate any assistance, or amending of the attached fiddle.
Thanks in advance
Paul
https://jsfiddle.net/awcguxs5/
$(document).ready(function () {
var lastItem = null;
$('#listingmenu').on('click', 'a', function () {
newItem = this.getAttribute('href').substring(1);
if (newItem != lastItem) {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
// fade out all open subcontents
$('.pbox:visible').hide(600);
// fade in new selected subcontent
$('#' + newItem).show(600);
lastItem = newItem;
}
}).find('a:first').click();
});

The problem is the references are still going to the corresponding ID locations. I've added one line of jquery that will scroll the page back to the top after the click. here is the line added:
$("html, body").animate({ scrollTop: 0 }, 1);
Here is your jsfiddle with this line:
https://jsfiddle.net/awcguxs5/2/
Let me know if this is what you were looking for! :)

$(document).ready(function () {
var lastItem = null;
$('#listingmenu').on('click', 'a', function () {
newItem = this.getAttribute('href').substring(1);
if (newItem != lastItem) {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
// fade out all open subcontents
$('.pbox').hide( 600);
// fade in new selected subcontent
setTimeout( function(){$('#' + newItem).show(600)} , 600 );
lastItem = newItem;
}
}).find('a:first').click();
});
The settimeout fixes the issue and gives -i think- a nicer effect than firing the hide and the show simultaneously.

This happens precisely because you did not want to use "data tags".
Add this to onclick block:
$('#listingmenu').on('click', 'a', function (e) {
e.preventDefault();
.... //rest of your code.
e.preventDefault() will stop the default action of a-href, which in your case uses #div1 anchors to jump to that div.
Your updated fiddle here: https://jsfiddle.net/awcguxs5/3/

Jquery mouseover function not firing

I have this Jquery code:
$(document).ready(function() {
// Do menu mouseovers
$('.bar a').each(function() {
var Link = $(this);
var LinkID = Link.attr("ID");
$('.menu-pop').each(function() {
var PopID = $(this).attr("data-for");
// We have found a match, assign events
if (PopID == LinkID) {
Link.mouseover = (function() {
alert("trucks lol");
});
return;
}
});
});
});
It's for a popup menu I'm writing. The simplified structure of the menu is:
<div class="bar">
<a class="item">Home</a>
<a class="item" id="mnuAnother">Another Link</a>
</div>
<div class="menu-pop" data-for="mnuAnother">
Links and stuff
</div>
I'm expecting it to do the alert when my mouse goes over the "Another" link, but at present it throws no errors/no alert.
Any help appreciated.

Did you try
Link.mouseover(function() {
alert("trucks lol");
});
(using jQuery's mouseover function which is a shortcut for binding the mouseover event)

See: http://jsfiddle.net/rQ72v/
Change this:
Link.mouseover = (function() {
alert("trucks lol");
});
to this:
Link.mouseover(function() {
alert("trucks lol");
});
Link.mouseover = doesn't really make any sense.
Perhaps Link.onmouseover = would work (or would you need Link[0].onmouseover =?) in terms of raw JavaScript.
But, it's much better to use jQuery's .mouseover().

I would replace the
// ...
$('.bar a').each(function() {
var Link = $(this);
// ...
by something line
// ...
$('.bar a').each(function(item) {
var Link = $(item);
// ...