Redefine Existing Function After DOM Changes

References to existing functions in AJAX result do not recognize functions

[StupidScript]

Apologies if this has been asked/answered ... in some way ...

In my page, I have a function:

function sayit(msg) {
alert(msg);
}

Later in the page, I make an AJAX call, and get back data like:

<div onclick="sayit('Hi there')">Hi There</div>

which is now included as the innerHTML of an existing element on the page.

Of course, when I click the link in the AJAX-returned data, I get "sayit is not defined".

How can I make a trigger for an existing function work from a returned AJAX response?

Note that I definitely know how to execute existing functions during the AJAX process (on success or complete, for example), but I do not want to execute the function DURING the process ... I need to execute the function on demand from a mouse click after the data has loaded into its calling page, as shown.

It is possible the function may never be called ... if the user does not click it ... and it should not fire unless they click it.

Can I redefine the existing function, or reinitialize it, or ... ?

"parent.sayit" and its iframe relatives are clearly incorrect.

Thanks for any advice. Tough to figure out how to ask this one for a search ...

[StupidScript]

Here's my code on the main page.

The first function shown is the call that does the AJAX request (of course).

Right after that you can see the function I would like to trigger from a link in whatever was returned by the AJAX call:

var row = "";
function showDetailsOnPage(sku) {
  var datastr = "pcode="+encodeURIComponent(sku);
  var row = "";
  jQuery.ajax({
    type: "POST",
    url: "ajax_get_item_in_production.php",
    data: datastr,
    success: function(a,b,c){
      console.log(a);
    },
    complete: function(data) {
      row += "<table border=0 cellpadding=6 cellspacing=0>";
      row += data['responseText']+"</table>";
      document.getElementById('production_details').innerHTML = row;
      document.getElementById('production_details').style.display = "block";
    }
  });
}
function expose(divid) {
  var thisdiv = document.getElementById(divid);
  var disp = (thisdiv.style.display=="block") ? "none":"block";
  thisdiv.style.display = disp;
}

And in the returned data, populated by rows from a db query:

$result .= "<img src='images/plus-sign-grey.png' onclick='expose(\"div".$iter."\")'>";

With many result rows.

Everything loads fine, but clicking the rendered link gives, "expose is not defined".

[StupidScript]

You ever have one of those days ... ?

This was not a problem, once I got a firm grip on what I was editing.

So ... to sum up ... if I could delete this post, I would ... there is no issue with calling to an existing script in this fashion from AJAX data, provided the function is spelled the same as its trigger.

D'oh! Carry on.

[ENetArch]

The human condition is easily resolved with a little reflection. A does equal A =)