title: Call javascript function from modal popup button
body: <p>I´m can´t make this work. Can anyone help me?</p>
  
  <p>First I have a page that opens a modal popup like this:</p>
  
  <pre><code>&lt;label class="h5"&gt; &lt;button id="btnPopup" name="btnPopup" type="button" class="btn-u-green" data-toggle="modal" data-target="#responsive"&gt;Clique aqui&lt;/button&gt; &lt;span id="txtEscolherEstabelecimento"&gt;para escolher o estabelecimento&lt;/span&gt; &lt;/label&gt;
  
  
  &lt;div class="modal fade bs-example-modal-lg" id="responsive" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt; &lt;div class="modal-dialog modal-lg"&gt;  &lt;div class="modal-content"&gt;         &lt;div class="modal-header"&gt;          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;            &lt;h4 class="modal-title" id="myModalLabel4"&gt;Escolha o Estabelecimento&lt;/h4&gt;           &lt;input type="hidden" name="nuEstabelecimentoEscolhido" /&gt;       &lt;/div&gt;
  
          &lt;div class="modal-body"&gt;            &lt;div class="row"&gt;
  
                  &lt;label class="label"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;Qual o Estado?&lt;/label&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;label class="select"&gt;
                          &lt;select id="cmbUf" name="cmbUf" class="form-control"&gt;
                              &lt;option value="0"&gt;::: Selecione :::&lt;/option&gt;
                              &lt;?php
                              $ufs = $objUfs-&gt;getUfs($objConexao);
                              while($ufs = $objConexao-&gt;converterResultado()){
                                  ?&gt;
                                  &lt;option value="&lt;?php echo $ufs['CoUf']?&gt;"&gt;&lt;?php echo $ufs['NoUf']?&gt;&lt;/option&gt;
                              &lt;?php }?&gt;
                          &lt;/select&gt;
                          &lt;i&gt;&lt;/i&gt;
                      &lt;/label&gt;
                  &lt;/div&gt;          &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;label class="label"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;Digite o nome para pesquisa&lt;/label&gt;
                  &lt;div class="col-md-12"&gt;
                      &lt;label class="input"&gt;
                          &lt;i class="icon-append fa fa-search"&gt;&lt;/i&gt;
                          &lt;input type="text" id="NoEstabelecimentoPesquisa" name="NoEstabelecimentoPesquisa" placeholder="Digite o nome principal do Estabelecimento"&gt;
                      &lt;/label&gt;
                  &lt;/div&gt;          &lt;/div&gt;
  
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn-u btn-u-default" id="btnPesquisarEstabelecimento" name="btnPesquisarEstabelecimento"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt; Pesquisar&lt;/button&gt;           &lt;/div&gt;
  
              &lt;table id="grdEstabelecimentosEncontrados" class="table" data-height="300" data-id-field="id" &gt;
                  &lt;thead style="font-size: 12px;" &gt;
                  &lt;tr&gt;
                      &lt;th data-field="Id" data-visible="false"&gt;Id&lt;/th&gt;
                      &lt;th data-field="NoEstabelecimento" data-visible="true"&gt;Nome&lt;/th&gt;
                      &lt;th data-field="NoTipoEstabelecimento" data-visible="true" &gt;Tipo do Estabelecimento&lt;/th&gt;
                      &lt;th data-field="Endereco" data-visible="true"&gt;Endereço&lt;/th&gt;
                      &lt;th data-field="CidadeUf"&gt;Cidade/Uf&lt;/th&gt;
                      &lt;th data-field="Acao"&gt;Ação&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody style="font-size: 12px"&gt;&lt;/tbody&gt;             &lt;/table&gt;
  
          &lt;/div&gt;
  
          &lt;div class="modal-footer"&gt;          &lt;button type="button" class="btn-u btn-u-default" data-dismiss="modal"&gt;&lt;i class="fa fa-close"&gt;&lt;/i&gt;Fechar&lt;/button&gt;       &lt;/div&gt;
  
      &lt;/div&gt; &lt;/div&gt;
  </code></pre>
  
  <p>After modal is opened I have a button on each line from table that I want to call a Javascript from the main page, each line look like this:</p>
  
  <pre><code>&lt;tbody style="font-size: 12px"&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Smaff Hyundai&lt;/td&gt;
          &lt;td&gt;Particular&lt;/td&gt;
          &lt;td&gt;Trecho SIA Trecho 1 - até 628 - lado par&lt;/td&gt;
          &lt;td&gt;Brasília&lt;/td&gt;
          &lt;td&gt;&lt;button id="button1" class="btn btn-success" type="button"&gt;&lt;i class="fa fa-check-circle-o" onclick="SelectItem(1);"&gt;&lt;/i&gt; Selecionar&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>Then I have thejavascript function I want to call:</p>
  
  <pre><code>function SelectItem(nuEstabelecimento) {
      alert('Here' + nuEstabelecimento);
  }
  </code></pre>
  
  <p>The row is added to table from another script that appends a row, like this:</p>
  
  <p>$.each(dataJSON, function(idx, elem){</p>
  
  <pre><code>newTR =  ('&lt;tr&gt;');
  newTR += ('&lt;td&gt;'+elem.NuEstabelecimento+'&lt;/td&gt;');
  newTR += ('&lt;td&gt;'+elem.NoEstabelecimento+'&lt;/td&gt;');
  newTR += ('&lt;td&gt;'+elem.NoTipoEstabelecimento+'&lt;/td&gt;');
  newTR += ('&lt;td&gt;'+elem.Endereco+'&lt;/td&gt;');
  newTR += ('&lt;td&gt;'+elem.CidadeUf+'&lt;/td&gt;');
  newTR += ('&lt;td&gt;&lt;button id="button'+elem.NuEstabelecimento+'" class="btn btn-success" type="button"&gt;&lt;i class="fa fa-check-circle-o" onclick="SelectItem(1);"&gt;&lt;/i&gt; Selecionar&lt;/button&gt;&lt;/td&gt;');
  newTR += ('&lt;/tr&gt;');
  
  $('#grdEstabelecimentosEncontrados tbody').append(newTR);
  </code></pre>
  
  <p>});</p>
  
  <p>Everything is work fine but the onclick button added don´t do anything and no error occurs on console. </p>
  
  <p>Any Helps on that? Thanks!!!</p>