Why is my onclick event on row <tr> throws "is not defined exception in HTML5/jquery?

Hi:

I'm trying to get the onclick event working in a <tr>

I create <tr>s and add the to my table in javascript.

function LoadTheCodeOnDemand(){

    function ClickGeneratedOrderRow(orderRow){
        alert("Clicked on Row");
    }; 

    function AddARow(){

       tableRow = $('<tr onclick="ClickGeneratedOrderRow(this);"/>');
       // Add a bunch of <td>s to the row
       
       $('#GeneratedOrdersTable > tbody').append(tableRow);

    };

};

Open in new window


When I click on the row at runtime, I get the following error.
(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {ClickGeneratedOrderRow(this);

Uncaught Reference Error: ClickGeneratedOrderRow is not defined.

Open in new window


Both of the above functions are defined with the same JS file, so scope should not be an issue (I think).

Any ideas would be helpful here. I think I need to pass the "this" so that I'll be able to tell which row was actually clicked. I can then get the required data from the row.

Any advice/thoughts on this?
LVL 1
jxbmaSoftware ConsultantAsked:
Who is Participating?
 
Meir RivkinFull stack Software EngineerCommented:
that is because u declared ClickGeneratedOrderRow inside LoadTheCodeOnDemand.
try declare it outside this scope, something like:
 
   function ClickGeneratedOrderRow(orderRow){
        alert("Clicked on Row");
    }

function LoadTheCodeOnDemand(){

    function AddARow(){

       tableRow = $('<tr onclick="ClickGeneratedOrderRow(this);"/>');
       // Add a bunch of <td>s to the row
       
       $('#GeneratedOrdersTable > tbody').append(tableRow);

    };

};

Open in new window


btw, why do u declare AddARow() inside LoadTheCodeOnDemand()?
0
 
leakim971PluritechnicianCommented:
Should work too :
function LoadTheCodeOnDemand(){

    function AddARow(){

       tableRow = $('<tr onclick="ClickGeneratedOrderRow(this);"/>')
       // Add a bunch of <td>s to the row
       
       tableRow.appendTo('#GeneratedOrdersTable > tbody').click(function() {
               alert("Clicked on Row");
       });

    };

};

Open in new window

0
 
Sar1973Commented:
Segdwick should have set the point: each function must be declared separately inside the script definition.
0
 
jxbmaSoftware ConsultantAuthor Commented:
We are integrated with Spring. Declaring functions within a DemandLoadPage() function allows me to package functions in a separate JS file which then get loaded only when the requested page is loaded into the browser.

 (I didn't design the overall architecture here, so I'm not in a position to change it either).

JB
0
 
jxbmaSoftware ConsultantAuthor Commented:
This works.
I created an Object outside of the scope of the demand load function.
I assigned the function as "a method" on that object.
I then was able to call it via "ScopeObject.ClickGeneratedOrderRow(this)".

All is well,

Thanks,
JB
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.