title: addEventListener() attached to multiple buttons, but only fires once
body: <p>I am writing a Facebook app in PHP/FBJS. I have some code where I attach an addEventListener() to two buttons. When I run the app, the first button I click on fires the addEventListener() and the event handler is invoked as expected. But if I click on the second button or click on the same button again, the event handler is not invoked. Here is my code:</p>
  
  <pre><code>//PHP
        public function loadCargoDialogFbjsAction() {
          $this-&gt;_helper-&gt;layout()-&gt;disableLayout();
          $this-&gt;_helper-&gt;viewRenderer-&gt;setNoRender();
  
          $loadableCargo = $this-&gt;getRequest()-&gt;getPost('loadableCargo');
          $fbjs =
            '&lt;div id="load_cargo_select"&gt;
              &lt;form id="load_cargo_select_form" action="" method="POST"&gt;
                &lt;p&gt;Your train has stopped in the city of ' . $loadableCargo['city'] . '&lt;/p&gt;
                &lt;p&gt;' . $loadableCargo['city'] . ' produces the following goods:&lt;/p&gt;
                &lt;ul&gt;';
          if(count($loadableCargo['city_goods']) &lt;= 0) {
            $fbjs .= '&lt;li&gt;None&lt;/li&gt;';
          } else {
            foreach($loadableCargo['city_goods'] as $goods) {
              $fbjs .= '&lt;li&gt;' . $goods['name'] . '&lt;/li&gt;';
            }
          }
          $fbjs .=
                '&lt;/ul&gt;
                &lt;p&gt;Your train is hauling the following goods:&lt;/p&gt;
                &lt;ul&gt;';
                if(count($loadableCargo['train_goods']) &lt;= 0) {
                  $fbjs .= '&lt;li&gt;None&lt;/li&gt;';
                } else {
                  foreach($loadableCargo['train_goods'] as $goods) {
                    $fbjs .= '&lt;li&gt;' . $goods['name'] . '&lt;/li&gt;';
                  }
                }
          $fbjs .=
                '&lt;/ul&gt;
                &lt;p&gt;What would you like to do?&lt;/p&gt;
                &lt;input type="button" id="load-new-submit" name="load-cargo-new" value="Load new goods" /&gt;
                &amp;nbsp;&amp;nbsp;
                &lt;input type="button" id="discard-existing-submit" name="load-cargo-discard" value="Discard existing goods" /&gt;
              &lt;/form&gt;
            &lt;/div&gt;';
  
          echo $fbjs;
        }
  
  
  // JavaScript/FBJS
      function loadCargo() {
        var actionPrompt = document.getElementById('action-prompt');
        actionPrompt.setTextValue('Loading cargo...');
  
        var ajax = new Ajax();
        ajax.responseType = Ajax.JSON;
        ajax.ondone = function(data) {
      //debugger;
          ajax.responseType = Ajax.FBML;
          ajax.ondone = function(fbjsData) {
      //debugger;
            if(data.loadableCargo.length == 0) {
              moveTrainManual();
            } else {
              var dialog = new Dialog().showChoice('Load Cargo', fbjsData, 'Minimize', 'Pass');
  
              var dlgBtnNew = document.getElementById('load-new-submit');
              dlgBtnNew.cityId = data.loadableCargo.city_id;
              dlgBtnNew.trainId = data.loadableCargo.train_id;
              dlgBtnNew.addEventListener('click', cargoEventHandler); //loadNewCargo);
  
              var dlgBtnDiscard = document.getElementById('discard-existing-submit');
              dlgBtnDiscard.cityId = data.loadableCargo.city_id;
              dlgBtnDiscard.trainId = data.loadableCargo.train_id;
              dlgBtnDiscard.addEventListener('click', cargoEventHandler); //discardExistingCargo);
  
              dialog.onconfirm = function() {
                // Submit the form if it exists, then hide the dialog.
                dialog.hide();
                actionPrompt = document.getElementById('action-prompt');
                actionPrompt.setInnerXHTML('&lt;span&gt;&lt;div id="action-text"&gt;'+
                  'The "Load cargo" dialog has been minimized'+
                  '&lt;/div&gt;'+
                  '&lt;div id="action-end"&gt;'+
                  '&lt;form action="" method="POST"&gt;'+
                  '&lt;input type="button" value="Maximize" id="next-phase" onclick="loadCargo();" /&gt;'+
                  '&lt;/form&gt;'+
                  '&lt;/div&gt;&lt;/span&gt;');
                actionButton = document.getElementById('next-phase');
                actionButton.setValue('Maximize');
                actionButton.addEventListener('click', loadCargoEventHandler);
              };
              dialog.oncancel = function() {
                moveTrainManual();
              }
            }
          }
          ajax.post(baseURL + '/turn/load-cargo-dialog-fbjs', data);
        }
        ajax.post(baseURL + '/turn/load-cargo');
      }
  
      function cargoEventHandler(evt) {
        //new Dialog().showMessage('loadNewCargo', 'city id='+cityId+', train id='+trainId);
      //debugger;
        cityId = evt.target.cityId;
        trainId = evt.target.trainId;
  
        switch(evt.target.getId()) {
          case 'load-new-submit':
            ajax = new Ajax();
            ajax.responseType = Ajax.JSON;
            param = { 'load-cargo-submit': "Load new goods", 'city-id': cityId, 'train-id': trainId };
            ajax.ondone = function(data) {
              openCargoHolds = data.openCargoHolds;
              cargoHoldsUsed = 0;
              ajax.responseType = Ajax.FBML;
              param = { 'openCargoHolds': data.openCargoHolds, 'cityGoods': data.cityGoods, 'trainId': data.trainId };
              ajax.ondone = function(fbjsData) {
          //debugger;
                var dialog = new Dialog().showChoice('Load Cargo', fbjsData, 'Load cargo', 'Cancel');
                dialog.onconfirm = function() {
                  var goods = [];
                  var goodsIds = [];
                  numGoods = document.getElementById('goods-count').getValue();
  
                  for(var i = 0; i &lt; numGoods; i++) {
                    j = i + 1;
                    goods[i] = document.getElementById('goods-' + j).getValue();
                    goodsIds[i] = document.getElementById('goods-id-' + j).getValue();
                  }
                  var trainId = document.getElementById('train-id').getValue();
                  param = { "goods": goods, "goods-id": goodsIds, "train-id": trainId };
                  ajax.responseType = Ajax.JSON;
                  ajax.ondone = function(data) {
                    loadCargo();
                  }
                  ajax.post(baseURL + '/turn/do-load-cargo-new', param);
                  //dialog.hide();
                };
                dialog.oncancel = function() {
                  loadCargo();
                }
              }
              ajax.post(baseURL + '/turn/load-cargo-new-dialog-fbjs', param);
            }
            ajax.post(baseURL + '/turn/load-cargo-select', param);
            break;
          case 'discard-existing-submit':
            ajax = new Ajax();
            ajax.responseType = Ajax.JSON;
            param = { 'load-cargo-submit': "Discard existing goods", 'city-id': cityId, 'train-id': trainId };
            ajax.ondone = function(data) {
              ajax.responseType = Ajax.FBML;
              param = { 'openCargoHolds': data.openCargoHolds, 'trainGoods': data.trainGoods, 'trainId': data.trainId };
              ajax.ondone = function(fbjsData) {
                var dialog = new Dialog().showChoice('Discard Cargo', fbjsData, 'Discard cargo', 'Cancel');
                dialog.onconfirm = function() {
                  var goods = [];
                  var goodsIds = [];
                  numGoods = document.getElementById('goods-count').getValue();
                  for(var i = 0; i &lt; numGoods; i++) {
                    j = i + 1;
                    goods[i] = document.getElementById('goods-' + j).getValue();
                    goodsIds[i] = document.getElementById('goods-id-' + j).getValue();
                  }
                  var trainId = document.getElementById('train-id').getValue();
                  param = { "goods": goods, "goods-id": goodsIds, "train-id": trainId };
                  ajax.responseType = Ajax.JSON;
                  ajax.ondone = function(data) {
                    loadCargo();
                  }
                  ajax.post(baseURL + '/turn/do-load-cargo-discard', param);
                  //dialog.hide();
                };
                dialog.oncancel = function() {
                  loadCargo();
                }
              }
              ajax.post(baseURL + '/turn/load-cargo-discard-dialog-fbjs', param);
            }
            ajax.post(baseURL + '/turn/load-cargo-select', param);
            break;
        }
        return false;
      }
  </code></pre>
  
  <p>Any help would be greatly appreciated. Thanks!</p>
  
  <p>@Tim</p>
  
  <p>I changed my loadCargo() function as follows to prevent duplication of those elements, but I am still running into the same problem as before.</p>
  
  <pre><code>var loadCargoDialog;
  
  function loadCargo() {
    var actionPrompt = document.getElementById('action-prompt');
    actionPrompt.setTextValue('Loading cargo...');
  
    var ajax = new Ajax();
    ajax.responseType = Ajax.JSON;
    ajax.ondone = function(data) {
  //debugger;
      ajax.responseType = Ajax.FBML;
      ajax.ondone = function(fbjsData) {
  //debugger;
        if(data.loadableCargo.length == 0) {
          moveTrainManual();
        } else {
          if(loadCargoDialog == null) {
            loadCargoDialog = new Dialog().showChoice('Load Cargo', fbjsData, 'Minimize', 'Pass');
  
            var dlgBtnNew = document.getElementById('load-new-submit');
            dlgBtnNew.cityId = data.loadableCargo.city_id;
            dlgBtnNew.trainId = data.loadableCargo.train_id;
            dlgBtnNew.addEventListener('click', cargoEventHandler, true); //loadNewCargo);
  
            var dlgBtnDiscard = document.getElementById('discard-existing-submit');
            dlgBtnDiscard.cityId = data.loadableCargo.city_id;
            dlgBtnDiscard.trainId = data.loadableCargo.train_id;
            dlgBtnDiscard.addEventListener('click', discardExistingCargo, true);
  
          } else {
            loadCargoDialog.showChoice('Load Cargo', fbjsData, 'Minimize', 'Pass');
          }
  
          loadCargoDialog.onconfirm = function() {
            // Submit the form if it exists, then hide the dialog.
            loadCargoDialog.hide();
            actionPrompt = document.getElementById('action-prompt');
            actionPrompt.setInnerXHTML('&lt;span&gt;&lt;div id="action-text"&gt;'+
              'The "Load cargo" dialog has been minimized'+
              '&lt;/div&gt;'+
              '&lt;div id="action-end"&gt;'+
              '&lt;form action="" method="POST"&gt;'+
              '&lt;input type="button" value="Maximize" id="next-phase" onclick="loadCargo();" /&gt;'+
              '&lt;/form&gt;'+
              '&lt;/div&gt;&lt;/span&gt;');
            actionButton = document.getElementById('next-phase');
            actionButton.setValue('Maximize');
            actionButton.addEventListener('click', loadCargoEventHandler);
          };
          loadCargoDialog.oncancel = function() {
            moveTrainManual();
          }
        }
      }
      ajax.post(baseURL + '/turn/load-cargo-dialog-fbjs', data);
    }
    ajax.post(baseURL + '/turn/load-cargo');
  }
  </code></pre>