Question

I have a table of generated results, each that comes with an edit button.

<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>

And I have a temporary form.

<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>

Thus far, everything works fine.

However, I am trying to edit the input field based on the object I want to edit.

For example:
If I were to click on the edit button that resides beside “Some Result 1”, I am expecting the input field to be pre-filled with “Some Result 1”.

I tried using jQuery, which then led to the problem.

If I were to do this:

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

The code does not run as expected, when the button is clicked. I made an assumption that bootstrap data-toggle runs before the onclick event listener, hence not reading my code.

Is there any way around this? Or is my assumption wrong? If my assumption is wrong, please lead me on the correct path.

Thank you.

Answer 1

According to the bootstrap code ( https://github.com/twitter/bootstrap/blob/master/js/bootstrap-modal.js ), bootstrap use the click event and prevent the default browser behavior. So here, bootstrap just prevent the browser to navigate when you click an anchor.

But bootstrap don’t prevent the click event from bubbling so you should be able to catch it and do what you want. I just tried a little example with a log message on a click on an anchor with a data-toggle=modal and a simple modal. And it works.

Maybe you try to bind the click event when your elements are just not here ?

Try this :

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