?
Solved

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

Posted on 2016-09-19
4
Medium Priority
?
125 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 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 58

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 58

Expert Comment

by:Julian Hansen
ID: 41808094
You are welcome
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

764 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