Solved

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

Posted on 2016-09-19
4
74 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 21

Assisted Solution

by:Kim Walker
Kim Walker earned 250 total points
Comment Utility
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 51

Accepted Solution

by:
Julian Hansen earned 250 total points
Comment Utility
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
Comment Utility
Thank you both, each of you answered a question that I had, whether I knew the question in advance or not!

Ralph
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
You are welcome
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now