Jquery 对话框仅读取一次文本区域值

Question

我正在使用带有文本区域的对话框。单击“确定”按钮后，文本区域的值将通过 ajax 发送到服务器。
用户第一次写入文本区域时，值会被正确读取，但在所有后续操作中，发送的值与第一次相同，就好像用户一遍又一遍地输入相同的字符串一样。

function message(url) { 
  var mydiv; 
  mydiv = $(document.createElement('div')); 
  mydiv.html("enter message: <textarea name='message' id='message'/>"); 
  mydiv.dialog(setProps(url));
  mydiv.dialog('open');
}

function setProps(url) {
  return {
    buttons: {
      "ok": function() {
        $.get('/act?url=' + url + '&message=' + $("#message").val().trim(),
          function(data) { 
            $("#content").load('/react?url=' + url); 
          }
        ); 
        $(this).dialog("close"); 
        $(this).dialog("destroy"); 
        // If I use the following all subseq. actions are empty:
        // $("#message").val(''); 
      }
    } 
  } 
} 

Answer 1

当您创建对话框时，它会附加到 的末尾，仅仅因为您销毁对话框并不意味着其中的元素会消失，它们只是返回到它们的位置，或者在本例中仍然位于 的末尾，您还需要 .remove() 这些元素，如下所示：

$(this).dialog("destroy").remove();

否则（当前）您将添加一个新 #message每次，您看到的是一个典型的重复 ID 问题，它获取第一个元素的值（您附加的第一个...从未离开过）。

---

总的来说，还有一些问题，例如 IE<9 没有 String.prototype.trim() 所以你的值会爆炸，就像有 & 之类的东西一样在其中。让 jQuery 对您的值进行编码，如下所示：

function message(url) { 
 $("<div>enter message: <textarea name='message' id='message'></textarea></div>")
   .dialog(setProps(url));
}

function setProps(url) {
  return {
    buttons: {
      "ok": function() {
        $.get('/act', { url: url, message: $.trim($("#message").val()) },
          function(data) { 
            $("#content").load('/react?url=' + url); 
          }
        ); 
        $(this).dialog("destroy").remove(); 
      }
    } 
  } 
}