Using Ajax and Dialog Widget

Question

I'm using a Dialog Widget for generate a popup with this code in my index.php:

<button class="btn btn btn-info openObs">Deixar observação</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>

and

$("#dialog").dialog({ autoOpen: false });
        $(".openObs").click(function() {
          $("#dialog").dialog("open");
});

so far no problem, but i have a ajax code that generate for me this buttons in a table in other archive and echoes the result back in my index.php in a result div:

 $return .= "$tabela";

  while($row = mysqli_fetch_assoc($query)){
            $data = str_replace('-', '/', $row['consulta_data']);
                  $data =  date('d/m/Y', strtotime($data));
            $return .= "<tr>";
            $return .= "<td>" .$row['consulta_idConsulta']."</td>";
            $id = $row['documento_id'];
            $return .= "<td>" .$data. "</td>";
            $return .= "<td>" .$row['consulta_hora']. "</td>";
            $return .= "<td>" .$row['consulta_desc']. "</td>";
            $return .= "<td>" .$row['profissional_nome']. "</td>";
            $return .= "<td>" . "<button class=\"btn btn btn-info openObs\">Deixar observação</button></td>";
            $return .= "</tr>";

          }

          echo $return .=" </tbody>
              </table>";

The problem is, when i click on the button generated by ajax nothing happens but if I put a button manually like up there works normal.

stanley1943 · Accepted Answer · 2015-09-01 00:55:15Z

1

The issue is that the button is generated. To avoid this, you need to use on() http://api.jquery.com/on/

$(body).on('click', '.openObs', function(){

});

Here is the js.fiddle for you. You can test it by enabling and disable individual function.

Make sure that the $(body) is not an element that is appended on later. So it can be $('.container'), as long as it is not javascript generated.

edited Sep 1, 2015 at 0:55

answered Sep 1, 2015 at 0:25

stanley1943

8771 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ankit Agarwal · Accepted Answer · 2015-09-01 02:41:15Z

0

The problem in your case is that when you are binding the click function for dialog, the button you are creating with ajax is not present in the DOM yet , hence no binding will be done on the buttons created by ajax after your binding. To achieve this functionality, a simple way is to bind the same function again after you created the button with ajax. This will solve the issue.

answered Sep 1, 2015 at 2:41

Ankit Agarwal

1,35810 silver badges15 bronze badges

Collectives™ on Stack Overflow

Using Ajax and Dialog Widget

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related