Javascript not working in JQuery loaded DIV

Question

Okay, here we go...

I have a page XYZ with a button that's supposed to call my function:

$(function() {


    $('#addgroupicon').on('click', function(event){

        addgroup();

    }); 

});


function addgroup()
{
$('#addgroupdialog').show();
}

// #addgroupdialog and #addgroupicon are within the loaded page, the above code is inside a .js file that I load in the header of the index.html

now I'm loading this page XYZ into a div with the .load() function, but when i click the button nothing happens. I also tried to add onclick='javascript:addgroup();' to the button, with no success.

can anyone help me?

You are adding div with addgroupicon after page load? that might be your problem. Add that code after element is loaded. — Milan Halada, Apr 18 '12 at 04:41
have you specified the use of jquery in your html file? Also, use `$(document).ready({...})` instead — A Person, Apr 18 '12 at 04:43
1. yes, i'm loading jquery.js in the header of the index.html 2. i tried inserting the $(function() { $('#addgroupicon').on('click', function(event){ addgroup(); }); }); into the loaded file, but then i still can't call the function — Ben Greene, Apr 18 '12 at 04:44
dont insert into laded file, but as callback in your load() function — Milan Halada, Apr 18 '12 at 04:53
What does `loading this page XYZ into a div with the .load() function` means? jQuery has no `.load()` method. — s.webbandit, Apr 18 '12 at 04:56
@siidheesh `$(function() {})` is a shortcut for `$(document).ready({...})` — voigtan, Apr 18 '12 at 05:18

score 4 · Accepted Answer · answered Apr 18 '12 at 05:17

You're not using "on" in the right way. It should be used like this:

$(document).on("click", "#addgroupicon", function(event){
        addgroup();
});

See the following fiddle which mimics your scenario, I think exactly:

http://jsfiddle.net/U4xZj/

To explain why, because I don't think the jquery docs do a very good job at this... Basically, if you think about what you're doing with "on" in the way you were using it:

$('#addgroupicon').on('click', function(event){

You're saying, ok jQuery, I want to create an event handler for the following selector, "addgroupicon". Jquery promptly turns around and goes "great!" #addgroundicon has exactly ZERO items that match it. Go away and stop bothering me. But doing it with $(document) first, jquery goes, "oh, ok. I can certainly create a click event handler for document. Now, if you only want me to raise this event when certain elements caused the click, then please provide a selector, and if the selector matches the source element, then I will call your callback." Make sense?

i can see how this is a similar scenario, but for some reason it just won't work in my code — Ben Greene, Apr 18 '12 at 06:11
i was calling $(function() { in another .js, now that i inserted the code there, it works just fine. obviously $(function() { can only be called once. thanks! — Ben Greene, Apr 18 '12 at 06:17

sbeliv01 · Answer 2 · 2012-04-18T05:19:42.067

2

Try this. If you're calling the element after the page is loaded, you'll need to use .live().

$(function() {


    $('#addgroupicon').live('click', function(event){

        addgroup();

    }); 

});

edited Apr 18 '12 at 05:19

answered Apr 18 '12 at 04:46

sbeliv01

11,550
2
23
24

i'm using JQuery 1.7, .live() is deprecated here – Ben Greene Apr 18 '12 at 04:47
1

that will not work, this refers to the document witch isnt a child node of #addgroupicon `$(this /*or document, if you are planing not to have it around the dom-ready */).on('click', '#addgroupicon', function() {})` – voigtan Apr 18 '12 at 05:16

score 0 · Answer 3 · answered Apr 18 '12 at 04:50

0

Never seen $(function() {}), try using $(document).ready({})
With $(document).ready({}), your js code will run after page is loaded, if addgroupicon is not there yet, click event will not get bind to it. So if you are adding addgroupicon later, you have to run that code after it has been added.
Why not use simple $('#addgroupicon').click(function(event){})

answered Apr 18 '12 at 04:50

Milan Halada

1,943
18
28

$(function(){}); does the same thing as .ready(); it's the "shorthand" version. – sbeliv01 Apr 18 '12 at 04:53
my site consists of 100+ pages i load in divs and about half have this and other buttons and need to call the respective functions, so adding it to each page seperately can't be the smart solution for me. i know that .click is the same as on, just wanted to be clear, that i'm not using the old click but the .on() function. – Ben Greene Apr 18 '12 at 04:54
well you can call it in your load() function. Acording to [this](http://api.jquery.com/load/) load can have a callback function that is launched after load completion – Milan Halada Apr 18 '12 at 04:57
http://stackoverflow.com/questions/2662778/what-is-the-difference-between-these-jquery-ready-functions – Jashwant Apr 18 '12 at 05:08

score 0 · Answer 4 · edited Apr 18 '12 at 09:41

0

You can use .bind() method instead of .live().

$(function() {    
    $('#addgroupicon').bind('click', function(event){
        addgroup();
    }); 
});

edited Apr 18 '12 at 09:41

DaveShaw

52,123
16
112
141

answered Apr 18 '12 at 04:52

naresh

33
7

We should use `on`. See this, http://api.jquery.com/delegate/ and http://api.jquery.com/on/ – Jashwant Apr 18 '12 at 05:15

score 0 · Answer 5 · answered Apr 18 '12 at 04:54

0

Try to use live() instead of bind() for button.

answered Apr 18 '12 at 04:54

freeze

546
6
16

http://api.jquery.com/live Dont use `live`, its deprecated, use `on` instead http://api.jquery.com/on/ – Jashwant Apr 18 '12 at 05:14

score 0 · Answer 6 · answered Apr 18 '12 at 05:12

I didnt quite understand your question, but if live() solves your problem and if you are not using it because its deprecated.

Here's the way to go,

$("body").on("click", "#addgroupicon", function(event){
    addgroup();
});

Refer: http://api.jquery.com/on/

score 0 · Answer 7 · answered Apr 18 '12 at 08:03

0

curious why you're using .on() Wont this do?

$('#addgroupicon').click(function(){
    $('#addgroupdialog').show();
});

answered Apr 18 '12 at 08:03

ngplayground

20,365
36
94
173

Javascript not working in JQuery loaded DIV

7 Answers7