Q:

Best way to bind events (with dynamiac data) to elements after ajax load in raw javascript

After html is entered into a container from a ajax response I would like to bind an event to various elements. I know this can be achieved by running addEventListener or on+event=function(){} right after the html is inserted.
My problem is that I am unsure of the best method to do so with dynamic content, whereas the data passed into the event is different each time.
For example, the following html is loaded into a container:
<button id="myButton">go</button>

Now, I need to bind an onclick function to the button element that contains data that was rendered on the remote side - the onclick function would be something like:
myFunction($data1,$data2,$data3);

whereas $data1,$data2,$data3 are variables with the dynamic data. 
One way I can have this function bound to the button is by outputting a script to be evaluated after the HTML data is inserted into the container, so the HTML output would go like this:
<button id="myButton">go</button>
<script>document.getElementById('myButton').addEventListener('click',function(){myFunction(<?php echo $data1.','.$data2.','.$data3 ?>)});})</script>

Is there anyway I can achieve the result from the above code in a more flexible way without having to output that script line for every element and for each request?
A way that I thought of is to have a bind function that is called after every request is completed, and in this function every element that needs an event bound is stored in an array. A loop goes through the array and binds the appropriate event and function - but this gets complicated with dynamic data. Any ideas?

A:

Use your own form of event delegation:
var container = document.getElementById("container");
container.addEventListener("click", function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName === "BUTTON") {
        // execute handler code for buttons
    }
}, false);

Where the container element is the closest, stable (not being added/removed from the DOM) element that these dynamic elements/buttons are being added to at some level.
The event is bound once to one containing element, but is triggered for any click event that bubbles up from descendants (the default behavior of click events).
This will simply check if the tagName of the element is "button". This is pretty broad, but if this is the thing you want to filter out, that's what you can use. If you want to use a class, add a specific class (maybe "special-class") to the dynamic buttons and use:
if (~(" " + target.className + " ").indexOf(" special-class ")) {
    // execute handler for buttons with class "special-class"
}

If you need to pass specific data with the buttons/elements, add a specific data-* attribute that contains it, to the buttons when generating them:
<button id="whateverId" data-data1="$data1" data-data2="$data2" data-data3="$data3">go</button>

And in the event handler where you know it's the targeted buttons, you can use:
var data1 = target.getAttribute("data-data1");
var data2 = target.getAttribute("data-data2");
var data3 = target.getAttribute("data-data3");

Reference:

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/all-you-need-to-know-about-the-html5-data-attribute/
http://caniuse.com/dataset

