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?

Answer 1

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?