Question

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

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

当你创建一个对话框时，它会附加在<body>的末尾，只是因为你破坏了对话框并不意味着它中的元素消失了，它们只是返回到它们的位置，或者在这种情况下仍然在<body>的末尾，您还需要.remove()这些元素，如下所示：

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

否则（目前）您每次都会添加新的 #message元素，而您所看到的是经典的重复ID问题，它会获得第一个的价值（你附加的第一个......从未离开过。）

总的来说还有一些问题，例如IE＆lt; 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(); 
      }
    } 
  } 
}

Jquery Dialog只读一次textarea值

1 个答案: