Novice issue of this jQuery code not working - javascript

I'm really new to jQuery, and I want this code to show an alert box when the button is pressed.
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$("button").click(function() {
alert("You clicked.");
});
</script>
<button>Button</button>
I try it, and nothing happens when I click the button.

In jQuery when event handlers are added, you need to make sure that the element is already loaded to the dom else jQuery selector will not return the element so the event handler will not get registered.
The solution is to use the dom ready event handler which will get triggered once the initial dom loading is completed meaning all the elements in the pages is loaded into the dom, it is the safest place to add the event handlers.
jQuery(function($){
$("button").click(function() {
alert("You clicked.");
});
})
As #zzzzBov noted below, it is a short cut for using the lengthy document ready handler
jQuery(document).ready(function($){
$("button").click(function() {
alert("You clicked.");
});
})

Right now, when your code executes, the button has not been loaded so it does not attach the click handler to anything, therefore you need to wrap your jQuery code in $(document).ready(function() { ... }); so that there is for sure a DOM element to attach your handler to, so your code becomes:
$(document).ready(function() {
$("button").click(function() {
alert("You clicked.");
});
});
See the documentation on $(document).ready().

Put your code in ready event
$(document).ready(function(){
$("button").click(function() {
alert("You clicked.");
});
});

You're calling jQuery to add the click handler before you're <button> is declared, so jQuery doesn't find it. Either move the <button> to the top of your snippet, or use a DOM ready function to delay your script execution until the DOM is ready to be manipulated.
Like this:
$(document).ready(function() {
$("button").click(function() {
alert("You clicked.");
});
});

You're running that script before the button exists, put it after instead:
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<button>Button</button>
<script>
$("button").click(function() {
alert("You clicked.");
});
</script>

Related

how should i have a javascript animation execute when the page loads?

I dont want to use css3 transition, keeping it pure .js. let assume the following link
when you click, div(s) appear, but how can i get the same function run when the page load/open rather than triggering the function by clicking on btn.??
In this case, they were showing it to you in jQuery, and they were already wrapping it in a function that is not executed until the page is loaded. You just need to remove the "guts" of the click handler and call it directly.
Change:
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
To:
$(document).ready(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
Trigger the event on pageload or what jquery calls it, document.ready
$(document).ready(function() {
// do whatever.
});
document.ready short version
$(function () {
// do whatever.
});

jQuery trigger click event not working on div

I want to trigger a click event on a div. I use the following code but it is not working.
$('#showbanner').trigger('click');
<div id="showbanner">show banner</div>
What is that I am doing wrong? I actually want to show the banner 2 seconds after page is loaded. Before I could add delay event my click event for this div is not firing.
Here is my code example: http://codepen.io/anon/pen/aOzyxo
The issue is because your trigger('click'); call is the first thing in your script; it's called before the event is attached.
You need to move it to the end of the script so that the event handlers are bound when it is called:
Updated Codepen
enter code here
Try this .
$(function () {
$(document).on("click", "#showbanner", function () {
alert('Hola');
});
$("#showbanner").click();
});
show banner
Try this
JS
$('#showbanner').on("click", function() {
alert("test");
});
$('#showbanner').trigger('click');
HTML
<div id="showbanner">show banner</div>
Try this
$('#showbanner').on("click", function() {
alert("test");
});
$('#showbanner').click();

jQuery selector click function clarification

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.

after jquery insert - element isnot seen

i have this problem:
i am inserting certain html thru jquery. and in that inserted html i have a class to which i have binded a function. this function isnot beeing called, i have the feeling, the inserted html isnot seen yet by js.
my inserting code.
$(function(){
$('#einf').on('click', function(){
$('<tr><td><a class="ame">delete</a></td></td></tr>').insertAfter('#append_tr');
});
});
you can assume, inserting is working well. and this is my binded function:
$(function(){
$('.ame').on('click', function(){
alert('test');
});
});
i tested with already existing element with the same class ame, it is working with that. thanks for help and guidance
You have to run the click bind again on the added element.
Maybe something like this will work:
$('<tr><td><a class="ame">delete</a></td></td></tr>').insertAfter('#append_tr').find('.ame').on('click', function(){
alert('test');
});
Try with event delegation: http://jsfiddle.net/xehu9/
$('#einf').on('click', '.ame', function(e){ //<-----pass it here.
e.stopPropagation(); //<---------stop the event bubbling here.
alert('test');
});
This happens because you are trying to implement the click on a elem which is not present in the dom when page gets ready.
from the docs:
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().
try .live() instead .on()
http://jsfiddle.net/ThobiasN/Pt3db/
$(function(){
$('#einf').on('click', function(){ alert ('some');
$('<tr><td><a class="ame">delete</a></td></td></tr>').insertAfter('#append_tr');
});
$('.ame').live('click', function(){
alert('test');
});
});
You cannot reference an element that was dinamically created, because it's not in the DOM when javascript runs, I suggest you use TEMPLATES instead of dinamic html content.
However, if you want to follow this approach, jquery allows concadinating element methods:
$(function(){
$('#einf').on('click', function(){
$('<tr><td><a class="ame">delete</a></td></td></tr>')
.insertAfter('#append_tr')
.on('click',function(){
alert('test');
});
});
});

Trigger a jQuery Event Handler Assigned in a Different Code Block

I have a case where a click handler is defined/assigned in one jQuery code block (file) and I want to trigger it from another click event defined/assigned in a different jQuery code block. How can I accomplish this?
The following code is a greatly simplified version of what I am trying to accomplish. The behavior I want to see is a JavaScript alert "Element One" when I click #Element2.
Example HTML:
<p id="Element1">Element One</p>
<p id="Element2">Element Two</p>
First jQuery code block:
$(document).ready(function() {
$('#Element1').click(function() {
alert('Element One');
});
});
Second jQuery code block:
$(document).ready(function() {
$('#Element2').click(function() {
$('#Element1').click();
});
});
UPDATE: My original example actually works. I was building upon my field hint jQuery UI Dialog solution, and didn't account for about the 'clickoutside' handler that I was using. Adding a check to for the second element in my 'clickoutside' handler allows the dialog to display.
You need to trigger a click when you click on the first element. You can use the trigger method for this.
function element1Hanlder () {
alert('Element One');
}
$(document).ready(function() {
$('#Element1').click(function() {
alert('Element One');
});
});
$(document).ready(function() {
$('#Element2').click(function() {
$('#Element1').trigger('click');
});
});
EDIT: This is based on JohnP's "trigger" suggestion (so you should choose him as the right answer)...
If I load this block from an external js file...
$(document).ready(function() {
$('#Element1').click(function () {
alert( $(this).text() );
});
});
Then load this in a script tag within the HTML itself...
$(document).ready(function() {
$('#Element2').click(function () {
$('#Element1').trigger('click');
});
});
Seems to be working as intended.

Categories