1

我有一个生成结果表，每个都带有一个编辑按钮。

<table>
    <tr>
      <td>Some Result 1</td><td><a href='#edit_tmp_form' data-toggle='modal' role='button' class='response-edit btn btn-warning'>Edit</a></td>
    </tr>
    <tr>
      <td>Some Result 2</td><td><a href='#edit_tmp_form' data-toggle='modal' role='button' class='response-edit btn btn-warning'>Edit</a></td>
    </tr>
</table>

我有一个临时表格。

<div id="edit_tmp_form" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="form_label" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 id="form_label">Edit</h4>
    <form class="form-inline" method="post" action="/somewhere">
        <input type="text" id="add_name" class="input" placeholder="something" name="name">
        <button id='add_c' disabled="disabled" type="submit" class="btn">增加</button>
    </form>
  </div>
</div>

到目前为止，一切正常。

但是，我正在尝试根据我要编辑的对象来编辑输入字段。

例如：如果我要单击“Some Result 1”旁边的编辑按钮，我希望输入字段预先填写“Some Result 1”。

我尝试使用 jQuery，然后导致了问题。

如果我要这样做：

$('.response-edit').click(function(){
   console.log('abc');
});

单击按钮时，代码未按预期运行。我假设引导数据切换在 onclick 事件侦听器之前运行，因此不阅读我的代码。

有没有办法解决？还是我的假设是错误的？如果我的假设是错误的，请引导我走正确的道路。

谢谢你。

4

1 回答 1

1

根据引导代码（https://github.com/twitter/bootstrap/blob/master/js/bootstrap-modal.js），引导使用点击事件并阻止默认浏览器行为。所以在这里，引导程序只是阻止浏览器在您单击锚点时导航。

但是引导程序不会阻止点击事件冒泡，所以你应该能够捕捉到它并做你想做的事。我只是尝试了一个小例子，在单击带有 adata-toggle=modal和简单模式的锚点时出现日志消息。它有效。

当您的元素不在这里时，也许您尝试绑定单击事件？

试试这个 ：

$('body').on('click', '.response-edit', function(){
   console.log('abc');
});
于 2012-12-03T09:41:51.197 回答