javascript - 从模态弹出按钮调用 javascript 函数

Question

我无法完成这项工作。谁能帮我吗？

首先，我有一个打开模式弹出窗口的页面，如下所示:

<label class="h5"> <button id="btnPopup" name="btnPopup" type="button" class="btn-u-green" data-toggle="modal" data-target="#responsive">Clique aqui</button> <span id="txtEscolherEstabelecimento">para escolher o estabelecimento</span> </label>


<div class="modal fade bs-example-modal-lg" id="responsive" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg">  <div class="modal-content">         <div class="modal-header">          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>            <h4 class="modal-title" id="myModalLabel4">Escolha o Estabelecimento</h4>           <input type="hidden" name="nuEstabelecimentoEscolhido" />       </div>

        <div class="modal-body">            <div class="row">

                <label class="label">&nbsp;&nbsp;&nbsp;Qual o Estado?</label>
                <div class="col-md-6">
                    <label class="select">
                        <select id="cmbUf" name="cmbUf" class="form-control">
                            <option value="0">::: Selecione :::</option>
                            <?php
                            $ufs = $objUfs->getUfs($objConexao);
                            while($ufs = $objConexao->converterResultado()){
                                ?>
                                <option value="<?php echo $ufs['CoUf']?>"><?php echo $ufs['NoUf']?></option>
                            <?php }?>
                        </select>
                        <i></i>
                    </label>
                </div>          </div>

            <div class="row">
                <label class="label">&nbsp;&nbsp;&nbsp;Digite o nome para pesquisa</label>
                <div class="col-md-12">
                    <label class="input">
                        <i class="icon-append fa fa-search"></i>
                        <input type="text" id="NoEstabelecimentoPesquisa" name="NoEstabelecimentoPesquisa" placeholder="Digite o nome principal do Estabelecimento">
                    </label>
                </div>          </div>

            <div class="modal-footer">
                <button type="button" class="btn-u btn-u-default" id="btnPesquisarEstabelecimento" name="btnPesquisarEstabelecimento"><i class="fa fa-search"></i> Pesquisar</button>           </div>

            <table id="grdEstabelecimentosEncontrados" class="table" data-height="300" data-id-field="id" >
                <thead style="font-size: 12px;" >
                <tr>
                    <th data-field="Id" data-visible="false">Id</th>
                    <th data-field="NoEstabelecimento" data-visible="true">Nome</th>
                    <th data-field="NoTipoEstabelecimento" data-visible="true" >Tipo do Estabelecimento</th>
                    <th data-field="Endereco" data-visible="true">Endereço</th>
                    <th data-field="CidadeUf">Cidade/Uf</th>
                    <th data-field="Acao">Ação</th>
                </tr>
                </thead>
                <tbody style="font-size: 12px"></tbody>             </table>

        </div>

        <div class="modal-footer">          <button type="button" class="btn-u btn-u-default" data-dismiss="modal"><i class="fa fa-close"></i>Fechar</button>       </div>

    </div> </div>

打开模态后，表格中的每一行都有一个按钮，我想从主页调用 Javascript，每行如下所示:

<tbody style="font-size: 12px">
    <tr>
        <td>1</td>
        <td>Smaff Hyundai</td>
        <td>Particular</td>
        <td>Trecho SIA Trecho 1 - até 628 - lado par</td>
        <td>Brasília</td>
        <td><button id="button1" class="btn btn-success" type="button"><i class="fa fa-check-circle-o" onclick="SelectItem(1);"></i> Selecionar</button></td>
    </tr>
</tbody>

然后我就有了我想要调用的javascript函数:

function SelectItem(nuEstabelecimento) {
    alert('Here' + nuEstabelecimento);
}

该行从另一个附加行的脚本添加到表中，如下所示:

$.each(dataJSON, 函数(idx, elem){

newTR =  ('<tr>');
newTR += ('<td>'+elem.NuEstabelecimento+'</td>');
newTR += ('<td>'+elem.NoEstabelecimento+'</td>');
newTR += ('<td>'+elem.NoTipoEstabelecimento+'</td>');
newTR += ('<td>'+elem.Endereco+'</td>');
newTR += ('<td>'+elem.CidadeUf+'</td>');
newTR += ('<td><button id="button'+elem.NuEstabelecimento+'" class="btn btn-success" type="button"><i class="fa fa-check-circle-o" onclick="SelectItem(1);"></i> Selecionar</button></td>');
newTR += ('</tr>');

$('#grdEstabelecimentosEncontrados tbody').append(newTR);

});

一切工作正常，但添加的 onclick 按钮没有执行任何操作，并且控制台上没有发生错误。

对此有什么帮助吗？谢谢!!!

Answer 1

使用事件委托(delegate)而不是向每一行添加点击处理程序:

$('#grdEstabelecimentosEncontrados').on('点击', '.btn-success', function(e){ //此代码将针对所有当前运行 //以及具有.btn-success类的 future 元素 });