Question

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

<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');
});

单击按钮时，代码无法按预期运行。我假设bootstrap数据切换在onclick事件监听器之前运行，因此不会读取我的代码。

这有什么办法吗？或者我的假设错了？如果我的假设是错误的，请引导我走正确的道路。

谢谢。

Answer 1

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

但是bootstrap不会阻止点击事件冒泡，所以你应该能够抓住它并做你想做的事情。我刚刚尝试了一个带有日志消息的小例子，点击了一个data-toggle=modal和一个简单模态的锚点。它有效。

当你的元素不在这里时，也许你试图绑定click事件？

试试这个：

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

在Bootstrap data-toggle ='modal'之前编辑表单输入值

1 个答案: