1

I have a table which refreshes upon keyup of input elements in a form. Upon keyup, I am refreshing the table data by first removing all existing rows, and then dynically adding new table rows. Each table row includes a link to another page. On initial page load, the link works correctly on the first click; but on subsequent table refreshes, the link does not fire until the second click.

Many other SO posts have recommended using the "on" method, however, this does not work in this case. The problem here seems to be caused by the jQuery "remove" method. When I comment out the line below, the link always works correctly on the first click.

$("#myTable").find("tr:not(:first)").remove();

I also tried using "detach" instead of "remove", but am running into some circular logic, as I'm trying to detach dynamically created rows that don't exist yet and then add them back later.

Here's the relevant code snippet:

$("input, select, #circles-slider").on("keyup change slidestop", function(event) {

    function searchSuccess(data, textStatus, jqXHR) {
        $(document).ready(function() {
        $("#myTable").find('tr:not(:first)').remove();
        for (var i = 0; i < data.length; i++) {
            var convertedData = JSON.stringify(data); 
            var str = jQuery.param(params);
            $('#myTable tr:last').after(
                "<tr>\
                 <td data-label='Rate' class = 'main-rate'>" + data[i][0].toFixed(3) + "%</td>\
                 <td data-label='APR'>" + data[i][2].toFixed(3) + "%</td>\
                 <td data-label='Payment'>$" + data[i][3].toFixed(2) + "</td>\
                 <td data-label='Program'>" + data[i][7] + "</td>\
                 <td data-label='Points'>" + data[i][8].toFixed(3) + "</td>\
                 <td data-label='Closing Costs'>$" + data[i][9].toFixed(2) + "            </td>\
                 <td data-label='Apply' id = 'tree'><a class = \'target\' href = \'/application\/?" + str + "'>Apply Now</a></td>\
                 </tr>");
            } 
        });
    }
}); 

// testing use of "on" does not work
$("#myTable").on("click", "a", function(){
      alert("Test click");
});
<table id="myTable">
  <caption>Loan Program options and interest rate table</caption>
  <tr id="header_row">
    <th>Rate</th>
    <th>APR</th>
    <th>Payment</th>
    <th>Program</th>
    <th>Points</th>
    <th>Closing Costs</th>
  </tr>
</table>

Full code is here: https://jsfiddle.net/shanif/kqLkaax7/ Thanks for the help!

shavi
  • 33
  • 3
  • Your `searchSuccess` function(with a DOM ready handler inside it) is nested inside an event handler, but is not called anywhere in the example shown. Where is `searchSuccess` called from? – iCollect.it Ltd May 21 '15 at 19:09
  • 1
    As the example above is a little messed up, can you provide the full HTML and code? (preferably in a JSFiddle as code snippets have a way of leaving our key details) :) – iCollect.it Ltd May 21 '15 at 19:12
  • 1
    For brevity sake, I didn't show all of the functions. Basically, on keyup, I am calling a function which runs an Ajax request to retrieve the data. The callback function from the Ajax request, if successful, then calls 'SearchSuccess'. I'll try to get something on JSFiddle. – shavi May 21 '15 at 19:24
  • @shavi but then it makes your code snippet redundant as its of no much use.. please add as much code to make this snippet work properly. – Chaitanya Gadkari May 21 '15 at 19:35
  • I've posted the full HTML and javascript. On keyup triggers `zc_lookup()` which calls `field_checks()`, which then calls `searchSuccess()` @TrueBlueAussie – shavi May 21 '15 at 21:57
  • Would you post an example of the populated `#myTable`, after ‘SearchSuccess’ has done its thing? – Honore Doktorr May 21 '15 at 22:19
  • There are a number of things I would recommend changing in your code, but a few questions may help clear this up. Firstly: When you tested `$("#myTable").on("click", "a", function()`, did you place that code *inside* your DOM ready handler? Otherwise `#myTable` would not match and the event would not register. – iCollect.it Ltd May 22 '15 at 10:08

2 Answers2

0

I recently had this type of issue with a link, so I ended up pulling some jenky magic with jquery:

<a href="#" onclick="$(this).click()">Double Click Simulation</a>

This simulates the double-click that will ensure the script reloads.

omikes
  • 8,064
  • 8
  • 37
  • 50
0

I figured it out. The problem was caused by registering multiple events to a single action. $("input, select, #circles-slider").on("keyup change slidestop", function(event). When pressing a key on any input field, it would trigger both keyup and change.

I changed it to $("input").on("keyup", function(event)and it works now.

shavi
  • 33
  • 3