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() {
...
Related
Not sure why this wouldn't work, but for some reason, the click event is firing a console.log but then it's not executing the addClass to the HTML element I'm trying to target. Not sure if there is anything that I need to look out for. I've tested this in Chrome on my Mac and it works fine, but then when I test on a Surface running Windows8, no dice.
Here's what I have:
HTML:
<div class="window-element">
<p>thing to test</p>
Close this
</div>
JS:
$(".close-box").on('click', function(e){
$(".window-element").addClass("hidden");
console.log("click test");
e.preventDefault();
});
Not sure if there is anything else that I need to work around with?
To make as a minimum change as possible I would change your JS to:
$(document).on('click','.close-box', function(e){
$('.window-element').addClass('hidden');
console.log("click test");
e.preventDefault();
});
This seemed to work for me. Try out this jsfiddle to see if this is what you're looking for: https://jsfiddle.net/91myczwj/1/
I would suggest you to use vanilla JavaScript for this particular code snippet like so:
HTML:
<div class="window-element">
<p>thing to test</p>
Close this
</div>
JavaScript:
const closeBox = document.querySelector('.close-box');
const windowElement = document.querySelector('.window-element');
closeBox.addEventListener('click', function(e){
windowElement.classList.add("hidden");
console.log("click test");
e.preventDefault();
});
Check this working code sample.
I have written a click function in jquery like below and experiencing some problem.
$(' #xxx').unbind('click').on('click', function () {
$('#xxx').removeClass('hide');
$('#xxx').toggle();
});
and the div for the click event is
<div id="xxx" class="hide"></div>
now when i click this div nothing appears. Only from the second click the toggle function takes place. Can anyone help me out with this please? I need the click from the first time. And most importantly i dont want the hide function while the page loads because My design breaks while loading and only when the loading is complete it looks nice.So how can i acheive it?
here is a working Fiddle of what you desire to do.. there is nothing wrong with your code, i dont know but maybe you forgot to import your jquery like this :
<script src="YOUR_JQUERY_PATH/JQUERY_FILENAME.js"></script>
$(' #xxx').unbind('click').on('click', function () {
// $('#xxx').removeClass('hide'); // <- remove this line
$('#xxx').toggle();
});
<div id="xxx" class="hide">aaaaaaaaa</div>
<script>
$(' #xxx').on('click', function ()
{
$('#xxx').removeClass('hide');
$('#xxx').toggle();
});
//Another method
$(' #xxx').click(function()
{
$('#xxx').removeClass('hide');
$('#xxx').toggle();
});
</script>
I ve tried many ways.But i still wonder y this isnt working. But when i modified my code like
<div id="xxx" style="display:none"></div>
$(' #xxx').on('click', function ()
{
$('#xxx').toggle();
});
it works like a gem.Anyway i got the output.Still in a confusion y my previous code hasnt worked.
Theres a gap in my understanding that i'd liked filled;
I have a basic jQuery click function like this..
$('.cl').each(function(e)
{
alert('works');
$(this).click(function()
{
alert('no works');
});
});
My HTML is like this:
<body>
<div id='c0'>
<div class='bO cl'>Button</div>
</div>
</body>
Basic stuff.
The 'works' alert is fired ok - but with the click function nothing happens - 'no works' is not fired.
Also
$('.cl').click(function()
{
alert('help');
});
Does not work. Simple stuff i'm sure but i'm missing something.
Why is this?
One thing to make sure is that you run the event handler once the DOM and jQuery are initialized, which is by doing this:
$(function() {
$('.cl').click(function()
{
alert('help');
});
});
Also alternatively, if your cl is loaded after the fact such as by an Ajax call you can alternativley do this
$("body").on("click", ".cl", function() {
// Your code here
})
This registers the click event with the body but only gets dispatched if the actual target is of type cl.
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();
});
I have the following which is supposed to remove the element ".mycontainer" when I click on a close button. It's not removing the element though. When I use firebug. I can see that it is just moving it to outside of the html tags at the beginning on the code.
$('.closeButton').click( function() {
$(".mycontainer").slideUp( function() {
$(".closeButton").parent().appendTo(".ContentsHolder");
$(this).remove();
});
});
It works if I comment out the 3rd line //$(".closeButton").parent().appendTo(".ContentsHolder");
but this removes the content so I can't access it again.
EDIT:
My html looks something like this if it helps to understand what I'm doing...
<div class='ContentsHolder'>
</div>
<div class='mycontainer'>
<div class='myContent'>
<a class='closebutton'>close</a>
... other content ...
</div>
</div>
I have also managed to make it work by putting a delay on the removal of mycontainer $(this).delay(500).remove();
I would not think this is a great solution though.
You could just chain the remove function after the slideUp like so :
$('.closeButton').click( function() {
$(".mycontainer").slideUp( function() {
$(".closeButton").parent().appendTo(".ContentsHolder");
}).remove();
});
I have solved same problem before like this:
$(".mycontainer").slideUp(500, function() {
$(this).remove();
});
It looks like $(this) is a different context to what you think.
Try adding console.log($(this)); to see the actual context in the console.
$('.closeButton').click( function() {
$(".mycontainer").slideUp( function() {
$(".closeButton").parent().appendTo(".ContentsHolder");
console.log($(this));
$(this).remove();
});
});