JQuery ui.dialog + ajax

Question

代码，加载一些'divs'并将它们全部弹出到一个对话框对象中（Sec1）。

每个警报都有一个“dismiss”链接（Sec2），一个发送ajax请求的JQuery事件监听器，并显示一个根据结果创建的新对话框（Sec3）。

似乎它一切正常，但是，有一个问题：点击'dissmis'后，结果对话框被加载了很多（10，目前，在以前版本的代码中，只有5 ..）

 //Sec1
 $("#alerts_list").dialog({
    title : "Alerts",
    resizable : false,
    dialogClass : "alerts",
    modal : true,
    maxHeight: $(window).height()- 20,
    buttons : [{
       text : "Done",
       click : function() {
          $(this).dialog("close");
       }
    }]
 });

警报代码为：

HTML

//Sec2
<div class="alert<?php echo " " .$alert_class?>">
   <h3>Title</h3>
   <p class="alert-message">some text</p>
   <div class="toolbar">
      <a class="dismiss" href="/alerts/dismiss/1">dismiss</a>
      <a href="/alerts/">settings</a>
   </div>
</div>

//Sec3
$(".alert .toolbar a.dismiss").on('click',function(eve) {
   eve.preventDefault();
   $url = $(this).attr("href");
   $.get($url, null, function(data) {
      $("p").html(data).appendTo('body').dialog();
   });
});

Answer 1

您可能希望将$("p")替换为$("<p></p>")或$("<p>")。

Answer 2

这个选择器：

$("p").html(data).appendTo('body').dialog();

正在影响您的所有<p>元素。

尝试使用更具体的选择器。

代码：

//Sec3
$(".alert .toolbar a.dismiss").on('click',function(eve) {
   eve.preventDefault();
   $url = $(this).attr("href");
   $.get($url, null, function(data) {
      $(this).parent().siblings("p").html(data).appendTo('body').dialog();
   });
});