使用jQuery在表格中使用按钮来打开一个模态 - Use a button inside a table to open a modal by jQuery

Use a button inside a table to open a modal by jQuery

我的代码有问题，我不知道如何解决它。我有一个产品列表，我通过命令$('#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');
    });

有谁能帮我找到答案吗?非常感谢!

尝试使用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>

根据你的问题，我猜你正在使用引导模式。为了打开一个模态(Bootstrap)通过点击链接，你需要提供模态id引用链接的href属性，并添加data-toggle="modal"链接，它会像微风一样工作。试试下面的代码:

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

如果你愿意，你可以把模态id放在data-toggle属性中而不是href。这完全取决于你的选择。这已经在Bootstrap版本3.x.x上进行了测试。看这把小提琴。享受吧!

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

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

希望能有所帮助。