jQuery .on("click", handler) not doing what I need it to do

Likely an obvious mistake, but I cannot get links and functions to behave as I want them to.

Our story so far:
The .ready() function for prelist_plan_levels.html is $(document).ready(review_plan_levels);

That function's  jQuery populates the page, including some links, one of which is:
<a href="/cmdb/public_html/Work/list_plan_levels.html" class="UpDowngrade" data-pp="Nov 2015" data-scope="PP" data-updown="UP">17</a>

Open in new window

Also, the first line of that function is
$('.UpDowngrade a').on( "click", listPlanLevelsClick ) ;

Open in new window


On clicking one of the links like the one shown above, I'm trying to get the following (incomplete) code to work:
// =================================================================================================
// This function responds to clicks in prelist_plan_levels.html

function listPlanLevelsClick(event) 
{ 
  event.stopPropagation();
  
  alert("inside function listPlanLevelsClick()") ;
  
  var UpDown='#' + $(this).data('UpDown');
  var posted_period='#' + $(this).data('PP');
  var scope='#' + $(this).data('scope');
  
  var php_params = 'job=UpDownGrade&UpDown='+UpDown+'&posting_period='+posted_period+'&scope='+scope ; 
  
  $('#debug').html(php_params) ;

    var jqXHR = $.ajax({
      url:        '/cmdb/PHP/do_DataTables_query.php' , 
      method:     "GET" ,
      cache:      false ,
      data:       php_params ,
      success:    load__list_plan_levels 
    }) ;
}

// -------------------------------------------------------------------------------------------------
// This function is the success callback for the AJAX that retrieved UpDowngradeable data
// When the page loads its .ready() function takes over.

function load__list_plan_levels()
{
  alert("inside function load__list_plan_levels()") ;
}

// =================================================================================================
// .ready() function for page:  list_plan_levels.html

function list_plan_levels()
{
  $('#UpDownGrade').DataTable() ;
  alert("inside function list_plan_levels()") ;
}

Open in new window

===============================
What happens is I get the alert for the third function, function list_plan_levels(), not either of the first two functions' alerts.
I need to do that ajax lookup and some other things before I get to that third function.

In real time I'm getting smarter WRT DataTables() and I will make some structure changes, but I still need to get past this hangup.

I've done this before, but I must be having a brain fart.

Thanks all,
Ralph
RalphAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kim WalkerWeb Programmer/TechnicianCommented:
One thing at a time. The selector in the following code appears to be wrong.
$('.UpDowngrade a').on( "click", listPlanLevelsClick ) ;

Open in new window

This selector is looking for an <a> tag which is a descendant of an element with class UpDowngrade. However, the sample link you've provided itself has the class UpDowngrade. If you are targeting this <a> tag, the selector should be:
$('a.UpDowngrade').on( "click", listPlanLevelsClick ) ;

Open in new window

However, if any of the ancestor elements of that <a> tag also has the class UpDowngrade, the selector should still work.
Julian HansenCommented:
Following on from Kim's post

If you are dynamically adding an <a> element and adding a click handler then the order is important.

Consider this code
<script>
$(function() {
  $('a.UpDowngrade').on( "click", listPlanLevelsClick );
  $('#result').append('<a href="/cmdb/public_html/Work/list_plan_levels.html" class="UpDowngrade" data-pp="Nov 2015" data-scope="PP" data-updown="UP">17</a>');
});
function listPlanLevelsClick()
{
  alert('you clicked me');
}
</script>

Open in new window

This will not have the desired effect. The bind happens before tthe .UpDowngrade class exists so there is nothing to bind to.
The code below will give the desired effect regardless of the ordering. This allows for specifying the handler and then dynamically adding a link based on some browser event after page load.
<script>
$(function() {
  $('body').on( "click", "a.UpDowngrade", listPlanLevelsClick );
  $('#result').append('<a href="/cmdb/public_html/Work/list_plan_levels.html" class="UpDowngrade" data-pp="Nov 2015" data-scope="PP" data-updown="UP">17</a>');
});
function listPlanLevelsClick()
{
  alert('you clicked me');
}
</script>

Open in new window

Note the .on("click" is now bound to the body tag (you can change that to another parent element that will exist when the code runs) and there is now an additional parameter which tells jQuery which child element of body you are interested in.

You can read more about the jQuery on function here

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RalphAuthor Commented:
Thank you both, each of you answered a question that I had, whether I knew the question in advance or not!

Ralph
Julian HansenCommented:
You are welcome
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.