?
Solved

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

Posted on 2016-09-19
4
Medium Priority
?
127 Views
Last Modified: 2016-09-20
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
0
Comment
Question by:Ralph
  • 2
4 Comments
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 1000 total points
ID: 41805923
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.
1
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 1000 total points
ID: 41806124
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
1
 

Author Closing Comment

by:Ralph
ID: 41807546
Thank you both, each of you answered a question that I had, whether I knew the question in advance or not!

Ralph
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41808094
You are welcome
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month14 days, 19 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question