使用表格内的按钮通过jQuery打开模式答案

【问题标题】：Use a button inside a table to open a modal by jQuery使用表格内的按钮通过jQuery打开模式
【发布时间】：2015-09-04 03:41:58
【问题描述】：

我的代码有问题，不知道如何解决。我有一个通过$('#allconta').load 命令在<tbody id="allconta"> 中导入的产品列表。我在每一行都放了一个按钮来编辑打开模式的产品，但我没有成功。

表格行由while() 生成，返回此代码：

echo "
<tr>
    <td>".$row['pid']."</td>
    <td>".$det['name']."</td>
    <td>".$opts_show."</td>
    <td>".date_format($hora,"H:i")."</td>
    <td>".number_format($valor, 2, ',', ' ')."</td>
    <td><a name='editaitem' class='btn btn-primary btn-xs' id='".$row['id']."'>
<span class='icon-edit'></span></a></td>
</tr>";

我尝试使用此代码，但不起作用：

$('a[name="editaitem"]').on('click',function(){
        $('#editped').modal('show');
    });

请有人帮我找到答案吗？非常感谢！

【问题讨论】：

这意味着$('#editped').modal('show');您正在尝试打开引导模式，我建议使用您当前的方法使用$('.openmodal').on('click',function(){类并在链接中添加class='btn btn-primary btn-xs openmodal'
我已经尝试过这个......但不起作用:(请看一下：gabrielvargas.zz.mu/caixa.php
你还没有在caixa_script.js中更改这个$('a[name="editaitem"]').on('click',function(){检查这里jsfiddle.net/48qdykq0/1
我认为问题不在于您尝试打开模态的方式问题是当您通过页面上的$('#allconta').load 加载数据时，模态及其调用已经存在，但打开模态的按钮来了$('#allconta').load 是动态的，因此它不与 jQuery 绑定以打开模式

标签： php jquery html

【解决方案1】：

尝试使用data-toggle="modal" data-target="#ModalID"，其中#ModalID 将是您要显示的模式的id 值。希望这会有所帮助。

<a name='editaitem' class='btn btn-primary btn-xs' id='".$row['id']."'data-toggle='modal' data-target='#ModalID'>
   <span class='icon-edit'></span>
</a>

【讨论】：

OP 当前的方法有什么问题，他想用 jQuery 打开模式？

【解决方案2】：

根据您的问题，我猜您正在使用引导模式。为了通过单击链接打开模态（Bootstrap），您需要提供对链接的 href 属性的模态 id 引用并将 data-toggle="modal" 添加到链接中，它会轻而易举地工作。试试下面的代码：

<a href="#myModal" data-toggle="modal" class="btn btn-primary">click</a>

如果您愿意，可以将模态 ID 放入 data-toggle 属性而不是 href。它完全由您选择。这已经在 Bootstrap 版本 3.x.x 上进行了测试。请参阅此fiddle。享受吧！

【讨论】：

【解决方案3】：

我看到了 Shehary 的评论，他是对的。当您使用$('#allconta').load 加载数据时，这可能是一个绑定问题，因为您尝试使用最初在页面加载时不在 DOM 中的链接（锚标记）触发 jQuery 模式。如果是绑定的问题，那么你可以试试下面的代码来显示模态，它会起作用：

$(document).on('click','a[name="editaitem"]', function(){
        $('#editped').modal('show');
    });

希望对你有帮助。

【讨论】：