We Keep Coding

After JQuery .load() my buttons don't work

I've been working on a Website where i want to load an html file to a div with jquery. Everything works fine except my buttons in the loaded html. If i click on them nothing happens. And i cannot even add #btn:hover{cursor: pointer;} with css although every other styling works fine.
$(document).ready(function() {
$('#main-content').load('./content/frontpage.html', complete);
});
function complete(){
const Btn = document.getElementById('btn')
//logs out the button nicely
console.log(Btn);
//Tried this way -- not working
Btn.addEventListener("click", () => {
console.log("clicked");
});
//Tried this way as well -- not working
$(document).on('click', '#btn', () => {
console.log("clicked");
})
}
//index.html
...
<main id="main-content">
</main>
...
//frontpage.html
<section class="container">
<button id="btn">Click me</button>
</section>
Anyone knows what is the problem? I searched for solutions but nothing works so far.
EDIT:
Oh and by the way, if i click the button from the console with:
document.getElementById('btn').click();
it works... Anyone knows anything what the hell is going on?

Looks like you're not closing line 3 as:
});
Another way to add a click listener is also:
$('#btn').click(function() {
console.log("clicked");
})

Well.. Your code works well, except a syntax error below.
$(document).ready(function () {
$('#main-content').load('frontpage.html', complete);
});
function complete() {
...

jQuery selector for element not on page

I have the following jQuery on the page:
$('#nav-icon1,#nav-icon3').click(function(){
});
And corresponding HTML like this:
<div id="nav-icon3" class="">
<span class="whitehamburger origin"></span>
<span class="whitehamburger origin"></span>
<span class="whitehamburger origin"></span>
<span class="whitehamburger origin"></span>
</div>
There's no nav-icon1 anywhere on the page, but when I change the jQuery to be this:
$('#nav-icon3').click(function(){
});
It stops working.
What am I missing? Thanks!

it's necessary attach that event to your div? check if your spans are position "relative" because if they are "absolute" your div "nav-icon3" may not be visible with height:0px.
another way to add events is using "bind"
$(function(){
$("#nav-icon3").bind('click', function()
{
// some code...
});
});
or
$(function(){
$("#nav-icon3").bind('click', _onNavClick);
});
function _onNavClick(event)
{
// some code...
}

It seems different error, what you are doing is working just how it is. Check it here jsfiddle.net/ed9xsh62/ Check your console or share URL to check the exact error.

$(function(){
$( "#nav-icon3" ).click(function() {
//code goes here
//can do a simple alert to test the function
});
});
Could be a possibility that you just did not have your code in document.ready function (I used the shorthand version). I tried your code and it worked perfectly as long as it was in the document.ready function.

Using jquery to make a div clickable and to run a function

So i want to execute code when i click on a div.
So I have a function
function froth(){$("#area").load("test.html #enquiry1");}
I want to call this function when I click a div
<div id="t1">Test</div>
So I try and use this code
$('#t1').click(function(){
froth();
});
Nope it doesnt work.
BUT
I go to the HTML document and do this
<div id="t1" onclick="froth()">Test</div>
AND IT works perfectly.
So my question is, what am i doing wrong here? Why would it work when in the html doc and not work when i try and make it clickable with jquery?

The main issue is that you need to bind your click event after the rest of the DOM has loaded
$(document).ready(function() {
$('#t1').on('click', function(){
froth();
});
});
You can see a live example here

$(document).on('click', '#t1', function() {
froth();
});

Toggle text with function called with onclick

my question is a short one but I couldn't figure it out by myself. I've got a function like -> http://jsfiddle.net/gtU56/ . I'm calling a javascript-function with an event-listener(onclick) in my html-code. The function itself is more complex but I need the last snippet. By clicking 'Show More' the text should change. Why won't the text change?

Because the toggleText function isn't available when the html code is rendered.
In other words the function isn't set until the page is ready so the onclick function doesn't reference anything.
Either have the function like here http://jsfiddle.net/gtU56/2/
or have it in the head of the page because its needs to be ready immediately
If you want it to wait for the ready state you can do the following and remove the onclick action all together
http://jsfiddle.net/gtU56/7/
$(".text").click(function()
{
$(".text").toggle();
});

toggleText = function () {
$('.text').toggle();
}
check here http://jsfiddle.net/gtU56/3/

It's because of how you're loading the function. Switch it from onLoad to no wrap (head) and it works fine.
jsFiddle example
Using jsFiddle's onLoad wraps your function in a window.onload call like this:
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
function toggleText() {
$('.text').toggle();
}
});//]]>
</script>
While no wrap (head) just adds it normally like this:
<script type="text/javascript">
//<![CDATA[
function toggleText() {
$('.text').toggle();
}
//]]>
</script>

since you are already claiming having jquery, you need not use inline javascript. try this
var elems = $('.text');
elems.click(function(){
elems.toggle();
});
fiddle : http://jsfiddle.net/gtU56/5/

$('.text').click(function() {
$('.text').toggle('slow', function() {
// do your animation..
});
});
​
Js Fiddle

This is the solution - http://jsfiddle.net/gtU56/6/
You need to first make sure that the function is registered after page load. Then, bind a click event to the div.
Hope this helps!

First you should organize you jQuery code like this:
$.(document).ready(function() {
// enter jQuery code here
});
Otherwise you're accessing a not completly loaded html document.
Also, you don't need the event-listener if you are using jQuery.
This should work for you:
$.(document).ready(function() {
$('.text').click(function() {
$(this).toggle();
});
});

Is very easy. You can use ID or CLASS.
onclick="$('NAME ID or CLASS').toggle(ANIMATION or DURATION);"
<div>
<div class="text" onclick="$('.text2').toggle(400);">Show More</div>
<div class="text2" style="display:none">Show Less</div>
</div>

jQuery: Not firing event after click

In action: http://3.alphenweer.nl/weer/
Code:
$(document).ready(function(){
$('.categorie[data-cat]').click(function(){
$('#cat-'+ $(this).attr('data-cat')).slideToggle('slow');
});
});
<span class="categorie" data-cat="nieuws">Nieuws</span>
<div class="box" id="box-nieuws">
Alphen
Nederland
</div>
Problem: When i click on a menu button (In the example: click on 'Neerslag' or 'Satteliet') nothing happens. I think the selector isn't correct, but it should be. Can you guys help me?

I think you're a bit confused. It appears that you want to use the data attribute of the clicked .categorie to slideToggle the corresponding element. So, you can do:
$('.categorie[data-cat]').click(function(){
$('div[id=box-"' + $(this).attr('data-cat') + '"]').slideToggle('slow');
});
or, assuming a structure consistent with the one you have posted, it can be simpler:
$('.categorie[data-cat]').click(function(){
$(this).next(".box").slideToggle('slow');
});

Already found the problem:
$(document).ready(function(){
$('.categorie[data-cat]').click(function(){
$('#cat-'+ $(this).attr('data-cat')).slideToggle('slow');
});
});
In the third line, $('#cat-' ... should've been $('#box-'