Develop Reference

Insert HTML after element with jQuery

I'm looking to add a button after a specific element on an existing page. This is the code I've tried so far.
$('.collection-nav').after('<span class="button">This is a button.</span>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="index-navigation collection-nav" role="navigation">
<div class="collection-nav-item" data-url-id="process">
<a href="/process/" class="process">
<span class="collection-nav-item-span">Process</span>
</a>
</div>
<div class="collection-nav-item" data-url-id="our-breads">
<a href="/our-breads/" class="our-breads">
<span class="collection-nav-item-span">Bread</span>
</a>
</div>
<div class="collection-nav-item" data-url-id="ourculutre">
<a href="/ourculutre/" class="ourculutre">
<span class="collection-nav-item-span">Culture</span>
</a>
</div>
<div class="collection-nav-item" data-url-id="about">
<a href="/about/" class="about">
<span class="collection-nav-item-span">About</span>
</a>
</div>
</nav>
Anything I'm missing here?

as far as I can see, the code you wrote is correct, but it needs to be triggered to work.
you can add a button like this => <button id="btnAfter">After Element</button>
you can try again later your code:
$('#btnAfter').click(function(){
$('.collection-nav').after('<span class="button">This is a button.</span>');
})

JavaScript Event for Capturing Dynamically Generated Non-Children Elements

I need to be able to get access to an element that will be available via AJAX after several click events. I cannot simply use $(element).on('click', selector, event) because the element I need access to is not a child element.
For example, what appears on initial page load is this:
<ol class="opc" id="checkoutSteps">
<li id="opc-billing" class="section opc-step"
data-step-number="0">
<div class="step-title" data-href="#step-1">
<span class="number">1</span>
<h2>Billing Information</h2>
<a onclick="stepTo('#step-2'); return false;"
href="#step-2">
View </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="billing-step-login" class="step a-item">
<div id="step-2"
class="panel-collapse collapse in">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-shipping" class="section opc-step"
data-step-number="1">
<div class="step-title" data-href="#step-2">
<span class="number">2</span>
<h2>Shipping Information</h2>
<a onclick="stepTo('#step-3'); return false;"
href="#step-3">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="shipping-step-login" class="step a-item">
<div id="step-3"
class="panel-collapse collapse ">
<div class="panel-body">
<button class="button btn-next" type="submit"><span><span>Continue</span></span></button>
</div>
</div>
</div>
</li>
<li id="opc-shipping_method" class="section opc-step"
data-step-number="2">
<div class="step-title" data-href="#step-3">
<span class="number">3</span>
<h2>Shipping Method</h2>
<a onclick="stepTo('#step-4'); return false;"
href="#step-4">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="shipping_method-step-login" class="step a-item">
<div id="step-4"
class="panel-collapse collapse ">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-payment" class="section opc-step"
data-step-number="3">
<div class="step-title" data-href="#step-4">
<span class="number">4</span>
<h2>Payment Method</h2>
<a onclick="stepTo('#step-5'); return false;"
href="#step-5">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="payment-step-login" class="step a-item">
<div id="step-5"
class="panel-collapse collapse ">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-review" class="section">
<div class="step-title" data-href="#step-6">
<span class="number">5</span>
<h2>Order Review</h2>
Edit
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="review-step-login" class="step a-item">
<div id="step-6" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
</li>
</ol>
Once I click the button inside div.#step-3, some content with a button loads in div.#step-4. After clicking the button in that div, a button loads in #step-5. Finally, after clicking on the button inside #step-5, there is content (textarea and another button) loaded in #step-6 that I'm interested in.
How do I go about writing a jQuery or JavaScript event that would allow me to get access to the div.#step-6 textarea? Can I write several nested $(element).on() events?
P.S. I don't have access to change any of the existing HTML, CSS, or JavaScript files. I can only write new JavaScript.

It seems that you can bind the delegated event to a common static ancestor.
For example, #checkOutSteps:
jQuery('#checkOutSteps').on('focus','div.#step-6 textarea',function(){
...
});
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future. --Event Delegation

next("some class") doesn't work

HTML
<div class="linksrtitle">Lorem ipsum</div>
<div class="linksrspace"></div>
<div class="linksrwrap"> // this div should be slided
<a class="linkr" href="volim-da-stoje.php">Lorem ipsum</a>
<a class="linkr" href="ova-salate-je-umrla.php">Lorem ipsum</a>
<a class="linkr" href="nova-rasa.php">Lorem ipsum</a>
</div>
<div class="linksrspace"></div>
JS
$(".linksrtitle").click(function(){
$(this).next(".linksrwrap").slideToggle(); // doesn't work
});
Why this click event doesn't work. Console is empty.

Use nextAll()(with first(), if multiple sibling with same class are there) to get that. next() only select immediate following sibling.
$(".linksrtitle").click(function() {
$(this).nextAll(".linksrwrap").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="linksrtitle">Lorem ipsum</div>
<div class="linksrspace"></div>
<div class="linksrwrap">// this div should be slided
<a class="linkr" href="volim-da-stoje.php">Lorem ipsum</a>
<a class="linkr" href="ova-salate-je-umrla.php">Lorem ipsum</a>
<a class="linkr" href="nova-rasa.php">Lorem ipsum</a>
</div>
<div class="linksrspace"></div>

jquery scroll to element then lock to that element regardless of changes on window size

I'm trying to use jQuery to scroll to a specific element inside of a wrapping element. It works as I intended it to work, as long as the screen width isn't resized. As soon as the screen width changes, the scroll doesn't stick. Here are my current code:
Javascript
function pageInit(pageId)
{
$('.page-wrapper').animate({ scrollLeft: $('#' + pageId).offset().left }, 500);
$('#' + pageId).css('postion', 'fixed');
console.debug('Page #' + pageId + ' initiated.');
}
pageInit('about');
HTML
<div class="page-wrapper">
<div class="page main-page" id="root" data-pos="0">
<div class="group-container">
<div class="book"></div>
<div class="promo">
<div class="button">
<a href="/about">
<div class="button-logo cover-button-logo"></div>
<div class="button-text">Read the summary</div>
</a>
</div>
<div class="button">
<a href="#" onclick="return false;">
<div class="button-logo yt-button-logo"></div>
<div class="button-text">Watch the trailer</div>
</a>
</div>
<div class="button">
<a href="#" onclick="return false;">
<div class="button-logo wattpad-button-logo"></div>
<div class="button-text">Coming soon on Wattpad</div>
</a>
</div>
<div class="button">
<a href="//localhost/internals/close_tab" target="twitter">
<div class="button-logo twitter-button-logo"></div>
<div class="button-text">#Ghifari160sBeingTheOne</div>
</a>
</div>
<div class="button">
<a href="//localhost/internals/close_tab" target="facebook">
<div class="button-logo facebook-button-logo"></div>
<div class="button-text">Share it on Facebook</div>
</a>
</div>
</div>
</div>
</div>
<div class="page about-page" id="about" data-pos="100">
<div class="group-container">
<div class="summary">
%Summary%
</div>
<div class="promo">
<div class="button">
<a href="#" onclick="return false;">
<div class="button-logo yt-button-logo"></div>
<div class="button-text">Watch the trailer</div>
</a>
</div>
<div class="button">
<a href="#" onclick="return false;">
<div class="button-logo wattpad-button-logo"></div>
<div class="button-text">Coming soon on Wattpad</div>
</a>
</div>
<div class="button">
<a href="//localhost/internals/close_tab" target="twitter">
<div class="button-logo twitter-button-logo"></div>
<div class="button-text">#Ghifari160sBeingTheOne</div>
</a>
</div>
<div class="button">
<a href="//localhost/internals/close_tab" target="facebook">
<div class="button-logo facebook-button-logo"></div>
<div class="button-text">Share it on Facebook</div>
</a>
</div>
</div>
</div>
</div>
The wrapping element should be scrolled to the right until the element with the id of "about" fills the entire screen. My current code works perfectly for that part. I just need to find a way to do the same thing when the screen width changes, that way the "about" element always fills the entire screen. I've tried checking every few seconds and rescroll to the element if the screen width change, but it fails every once in awhile. Is there any way that I can make the browser scroll to the element I intended it to scroll to, then rescroll to that element after detecting changes on screen width?
EDIT:
JSFiddle is here: https://jsfiddle.net/Ghifari160/sy3qgtqe/1/

The question is difficult to answer clearly since there's no way for us to see the results without a fiddle or pen. But, considering you're needing to trigger an event on a window resize, you should look at the window.resize global event handler.
Window.resize is an event handler like any other, so use your pageInit() function as the callback parameter for the handler. Make sure to still call your function an initial time, otherwise your function won't run until the window has been resized.
Edit: might as well add an example for clarity.
window.onresize = pageInit('about');

jQuery individual lists sliding up and down

I'm not really experienced with jQuery but I couldn't find an answer for this. What I exactly want to do is when people click on the img with the class machine-dropdown that the div overview does slideToggle. I got multiple lists on this page with the same construction so I need them to work individual.
<img class="machine-dropdown" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
<div class="clear"></div>
<div class="category-divider"></div>
<div class="row">
<div class="overview">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="machines">
<img class="actueel-img" src="" />
</a>
<a href="">
<span class="machine-overzicht-title"></span>
</a>
</div>
</div>
</div>
I tryed it with many methods that jquery already has. .closest .first .find but still when i click it slides all lists.
Thanks for the help already!

You could do it like this:
Change your HTML to this:
<img class="machine-dropdown" data-target="#overview-1" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
<div class="clear"></div>
<div class="category-divider"></div>
<div class="row">
<div class="overview" id="overview-1">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="machines">
<img class="actueel-img" src="" />
</a>
<a href="">
<span class="machine-overzicht-title"></span>
</a>
</div>
</div>
</div>
Note that I've added data-target="#overview-1" to the machine-dropdown image and id="overview-1" to the overview div.
Now use the following javascript/jquery:
$(function(){
$(".machine-dropdown").each(function(){
$(this).click(function(){
var target = $(this).data("target");
$(target).slideToggle();
});
});
});

use this attribute in your code.
$('.machine-dropdown').click(function(){
$(this).next().next().next().find('.overview').slideToggle();
});
I think it will solve your problem.