I'm trying to create a little demo on jsfiddle, but when I click the toggle button, the click event isn't firing, it says myclick is not defined.
I have looked at other answers which mention the No wrap solution, but I don't see such configuration option in jsfiddle right now.
The jsfiddle: https://jsfiddle.net/5j9qgbxa/4/
Change the load type to No wrap -bottom of the <body>
Here is the Demo
It seems that the javascript with type onload will create the javascript in the beginning of your jsfiddle as followed:
window.onload=function(){
function myclick(){
alert("myclick");
}
}
<YourHTML>
In which case he will not recognize myclick() as this is created later on in the HTML and is not triggered with onload. What you can do to avoid this is as you can see in this jsfiddle: https://jsfiddle.net/cqL9t8mh/1/
What I did here is, delete the onclick="myclick" in your button and replace it with and ID 'btnToggle'. Afterwards in the javascript section you can add an addEventListener of the type click on the ID 'btnToggle' to trigger your myclick function.
Also what you asked in the commands of previous answer is following:
This will make it so your code layout well be like:
<YourHTML>
function myclick(){
alert("myclick");
}
In which case your HTML is first created before your function and it is no longer in an onload so it will now be triggered every time you click your button.
Related
I have a listener on a group of elements:
$('a.menu__link').on('click',function() {alert('function was triggered');});
One element of which is:
<a class="menu__link menu__link--submenu Main" id="Events" href="#">Events</a>
I want to manually trigger a click on the element. Using Chrome dev tools, the event handler is:
a#Events.menu__link.menu__link--submenu.Main
However, the following code does not trigger the listener:
$('a#Events.menu__link.menu__link--submenu.Main').trigger('click');
I have tried every variation that I can think of, but I cannot find the correct reference to trigger the alert function.
What am I doing wrong?
You can use instead click instead of trigger like this to trigger a click :
$('#div').click();
Read more about click here
Here is a JsFiddle
I encased the trigger in a $(document).ready(function()) and that fixed it.
Kudos to Blazemonger for implying that it was a timing issue.
<script>$(document).ready(function() {
$('#Events').trigger('click');
$('#PastSeminars').addClass('menu__link--current');
});</script></body></html>
The lesson? Just because it is the last thing on the page, when in doubt, use document.ready.
Chrome blocks the click event from being programmatically fired. I'd come up with a new solution such as just calling the needed function wherever you need to trigger it.
You can read more about it here: https://teamtreehouse.com/community/why-does-my-onclick-event-not-fire-on-chrome
Using dot.js I'm adding a button to a specific web page that, when clicked, should add some text to a text field and then trigger another button to also be clicked. I simulate this by adding a click handler to my button which has this code:
var button = $('.some-class').find('button')[0];
console.log(button); // element I expect
button.click();
However, this doesn't work and I'm not sure why. If instead of .click() I perform .remove(), the button is removed from the page. If I use the console to execute the same code, the button does get clicked. This tells me I do have the right element, but there is something wrong with the click() event specifically.
Can someone explain why this isn't working in either Safari or Chrome? I've tried a lot of different things, but I'm new to jQuery so I'm probably missing some detail in how that works.
We went to the bottom of this in the chat. What probably caused the problem was another event-handler attached to (possibly) body, that undid the click.
So the solution was to stop the event from propagating:
event.stopPropagation();
While assigning the click event handler to the button you should use jquery on
This should ensure that whenever a new button with added with same selector (as in when event was assigned), event handled will be assigned to that button
Some examples here
The problem is the click() function is from jquery and you're attempting to fire the click function from the DOM object.
Try
$(button).click();
Here's a plunk.
http://plnkr.co/edit/2pcgVt
You can use the following statement.
var button = $('.some-class').find('button')[0].trigger('click');
try jquery's trigger() function:
$(button).trigger('click');
see jsfiddle: https://jsfiddle.net/665hjqwk/
I have a basic question regarding a tag in HTML.
Say that I've got some HTML like this
Do some work
When a user clicks on an anchor link (Do some work) which event will trigger first?
I mean whether doSomething() or href goes first.
doSomething() go first.. and if it returns false or is prevented, then the anchor link is not called.
This is what will happen:
The event will fire
the page will redirect.
But don't take my word for it, go test it out for yourself. I even got it started for you:
http://jsfiddle.net/WDdZS/
this is the simple code I used
function doSomething(){
alert("hello");
}
I added the return false, mentioned in other answers so you can see it in action. I didn't know about that actually, so always good to learn something new.
The JavaScript will execute first.
I've installed a handler for the click JavaScript event of a <button> element using the jQuery API, but the handler doesn't get called when the button is in fact clicked. How can I debug why the event handler isn't invoked? I'm developing in Visual Studio 2010 and debugging with the help of Google Chrome Developer Tools.
I'm new to JavaScript and don't know the debugging methods :)
EDIT
This is the HTML declaration of the button in question:
<button id="start-lint">Submit</button>
The relevant JavaScript:
$('button').button();
var btn = $("button#start-lint");
log.debug("Button: %s", btn);
btn.click(function () {
log.debug("Button clicked");
});
Let me know if more information is needed.
EDIT 2
Somehow I got it working, not sure what was wrong in the first place, but at least now I know how to tell if an element was found or not!
You can only debug if the code is actually fired, which it seems to not be.
You could try to see if its even finding the selector using length.
alert($("#myselector").length);
or
console.log($("#myselector").length);
For debugging javascript i recommend you to use FIREBUG for Firefox (http://getfirebug.com/) - you can set breakpoints, write to console etc, and it gives all possible displays of variables, objects etc.
Tutorial can be found here: http://www.youtube.com/watch?v=2xxfvuZFHsM
(You said you where new to jQuery/Javascript, so hope it helped :D)
Inline JavaScript is executed as the page loads, so if the button is defined after the JavaScript the code won't find it and so can't attach the handler. You need to put that JavaScript in the document ready (or onload) function, which means it will be executed after the button (and everything else on the page) has loaded, and/or put it after the button in the source.
I'm guessing that the $('button').button(); throws an exception, and the rest of your code isn't executed. Comment out that line and see if it works.
Original reply:
Paste your code, or the relevant parts of it.
Add a debugger; statement to your handler function to see if you are entering it.
If not, then there is a problem with how you're registering the handler.
If you are entering it, maybe there is a problem with the handler itself.
your button may look like this
<input type="button" value="Click" />
for this you bind a click handler like
$(document).ready(function(){
$("input[type='button']").click(function(e){
alert("somebody clicked a button");
});
});
http://jsfiddle.net/6gCRF/5/
but the drawback of this approach is it will get called for every button click, to prevent that you might want to add an id to your button and select that specific button e.g.
<input type="button" value="Click" id="specific" />
attach a click handler to it like
$(document).ready(function(){
$("#specific").click(function(){
alert("specific button clicked");
});
});
http://jsfiddle.net/6gCRF/4/
EDIT
in your case select the button by id
$(document).ready(function(){
$("#start-lint").clcik(function(){
console.log("clicked");
});
});
you can also use the pseudo :button selector
$(document).ready(function(){
$(":button").click(function(e){
console.log("clicked");
});
});
have a look at jquery selectors
It seems that this code:
$(function(){
$('.show_hide_login').toggle(
function (){
alert('show');
$("div#fullpage").show();
$("div#loginbox").show();
},
function (){
alert('hide');
$("div#loginbox").hide();
$("div#fullpage").hide();
}
); });
Any idea on why it would be running twice when I click on either link (two, one is a div and one is an anchor)?
How many elements do you have with the .show_hide_login class? I'll guess you have two of those. In which case, $('.show_hide_login') result contains two elements, and toggle() is executed for each of them.
This isn't an answer to your question, but you could clean up your code a bit like so:
$(function() {
$('.show_hide_login').toggle(
function() {
alert('show');
$("#loginbox,#fullpage").show();
}, function() {
alert('hide');
$("#loginbox,#fullpage").hide();
});
});
As to your actual problem, I suspect Nick's guessed the culprit. Check out this demo to see the result of binding the same event twice: http://jsfiddle.net/9jPLv/
In addition to adding an alert prior to the binding of the toggle event, you could add in an unbind() and see if that solves the problem, like so:
$('.show_hide_login').unbind().toggle(
If that solves it, the toggle binding is definitely being run twice, so you'd just have to figure out why.
my answer is just a kind of checkpoint,i had the same issue but for different reason. I did include the script file in base page as well as child page. this resulted in toggle running twice if you have this problem check that the script is added only once.
It might be the same issue i was having.
so if you got an element with a script tag in it - then you move that containing element or wrap it with another tag in jquery - then the ready function in jquery is executed again - thus binding a second toggle function to your element.
as suggested $('.show_hide_login').unbind().toggle( is a workaround that does work, but better to try moving your javascript code to the head or bottom of the page.