Solved

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

Posted on 2016-09-19
4
115 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 250 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 57

Accepted Solution

by:
Julian Hansen earned 250 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 57

Expert Comment

by:Julian Hansen
ID: 41808094
You are welcome
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

737 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