Javascript-форум - onClick для добавленного элемента в DOM

Помогите, пожалуйста, разобраться и по грамотному повесить событие на span (Картинка '+/-'). Если делать так:

Код:

/*before*/

span.onclick = function () {

    alert();

}

/*after*/

то, похоже, что span погибает после каждого захода, и забирает с собой повешенное на него событие. Вроде)

Код:

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title>js - фарева</title>

  <script>

    function __dscArr(tag, arr) {

      /*

      Вывод в указаный tag информацию о массиве: (key: value)

      */

      var ul = document.createElement('ul');

      var li = document.createElement('li');

      var span = document.createElement('span');

      var addClass = 'bivariate-array';

      var mas = [];



      //Построение

      tag.appendChild(ul);

      for (var key in arr) {

        if (Object.prototype.toString.call(arr[key]) === '[object Array]') {

          li.className = addClass;

          ul.appendChild(li);

          li.appendChild(span);



          /*before*/

          span.onclick = function () {

            alert();

          }

          /*after*/



          li.innerHTML += '' +

              '<b>' + key + ':' + '</b>'

          ;

          __dscArr(li, arr[key]);

        }

        else {

          ul.innerHTML += '' +

              '<li>' +

              '<b>' + key + ': ' + '</b>' +

              '<span>' + arr[key] + '</span>' +

              '</li>'

          ;

        }

      }

    }

  </script>

  <script>

    window.onload = function () {

      var mass = [

        0,

        [

          0, 1,

          [0, 1,

            [0, 1, 2, 3]

          ],

          3, 4

        ],

        2, 3, 4

      ];



      __dscArr(desc, mass);

    }

  </script>



  <style>

    * {

      margin: 0;

      padding: 0;

    }

    body {

      margin: 15px;

    }

    ul li {

      list-style-type: none;

    }

    li.bivariate-array {

      position: relative;

    }

    li.bivariate-array > span {

      position: absolute;

      top: 6px;

      left: -11px;

      width: 9px;

      height: 9px;

      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAJwAAACcBKgmRTwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8yMi8xM4uhIv4AAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAmUlEQVQ4jeVTSQ7EIAyzK/4d+DjupUGIApE63MYXIuHsMXPOAiCsQTNjKSXkJQAys2vFKKXUxwx5r0+Su+xbLDN9QXKjr8htSRwdurYbvP0WzB1JahZkdJzhaJuvYLuqIiQAnM2hgwcPeZQ+X8I0a3jZkvhsOFaApOUiSDYFRLw/UQAB1H4WowJIVkmXv6uqpjP7BUcVcPTObiyVZin7rh6UAAAAAElFTkSuQmCC") no-repeat -10px 0;

      cursor: pointer;

    }

    li.bivariate-array > span:hover {

      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAJwAAACcBKgmRTwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8yMi8xM4uhIv4AAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAmUlEQVQ4jeVTSQ7EIAyzK/4d+DjupUGIApE63MYXIuHsMXPOAiCsQTNjKSXkJQAys2vFKKXUxwx5r0+Su+xbLDN9QXKjr8htSRwdurYbvP0WzB1JahZkdJzhaJuvYLuqIiQAnM2hgwcPeZQ+X8I0a3jZkvhsOFaApOUiSDYFRLw/UQAB1H4WowJIVkmXv6uqpjP7BUcVcPTObiyVZin7rh6UAAAAAElFTkSuQmCC") no-repeat -10px -10px, #eee;

    }

    li.bivariate-array ul {

      margin-left: -7px;

      padding-left: 30px;

      border-left: 1px dashed #ccc;

      word-wrap: break-word;

    }

  </style>

</head>

<body>

  <div id='desc'></div>

</body>

</html>