javascript - 使用 Ajax 和对话框小部件

Question

我正在使用一个对话框小部件在我的index.php中使用以下代码生成一个弹出窗口:

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

和

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

到目前为止没有问题，但我有一个 ajax 代码，可以在其他存档的表中为我生成此按钮，并将结果回显到结果 div 中的 index.php 中:

 $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>";

问题是，当我单击 ajax 生成的按钮时，没有任何反应，但如果我像上面那样手动放置一个按钮，则工作正常。

Answer 1

问题是生成了按钮。为了避免这种情况，你需要使用 on() http://api.jquery.com/on/

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

});

这是js.fiddle为你。您可以通过启用和禁用单个功能来测试它。

确保 $(body) 不是稍后附加的元素。所以它可以是 $('.container')，只要它不是 javascript 生成的。