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>

これまでのところ、すべてが正常に機能しています。

ただし、編集したいオブジェクトに基づいて入力フィールドを編集しようとしています。

例：「SomeResult 1」の横にある編集ボタンをクリックした場合、入力フィールドに「SomeResult1」が事前に入力されていることを期待しています。

jQueryを使用してみましたが、問題が発生しました。

私がこれを行うとしたら：

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

ボタンがクリックされたときに、コードが期待どおりに実行されません。ブートストラップデータトグルはonclickイベントリスナーの前に実行されると想定したため、コードを読み取っていません。

これを回避する方法はありますか？それとも私の仮定は間違っていますか？私の仮定が間違っている場合は、正しい道に私を導いてください。

ありがとうございました。

4

1 に答える 1

1

ブートストラップ コード ( https://github.com/twitter/bootstrap/blob/master/js/bootstrap-modal.js ) によると、ブートストラップはクリック イベントを使用し、既定のブラウザーの動作を防ぎます。したがって、ここでは、ブートストラップは、アンカーをクリックしたときにブラウザーがナビゲートできないようにするだけです。

ただし、ブートストラップはクリックイベントのバブリングを妨げないため、それをキャッチして必要なことを実行できるはずです。data-toggle=modal単純なモーダルを使用してアンカーをクリックすると、ログ メッセージが表示される小さな例を試してみました。そして、それは機能します。

要素がここにないときにクリックイベントをバインドしようとするかもしれませんか?

これを試して ：

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