从模态弹出按钮

时间:2017-01-16 21:08:38

标签: javascript bootstrap-modal

我无法完成这项工作。任何人都可以帮助我吗?

首先,我有一个页面可以打开这样的模态弹出窗口:

<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,function(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按钮没有做任何事情,并且控制台上没有出现错误。

有什么帮助吗?感谢!!!

1 个答案:

答案 0 :(得分:2)

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

Car cars= new Car[5]; int i=0; While(i<5){ //ask user for input . . . cars[i] = new Car(make,model,year); }

相关问题