Question

我是jquery新手。我试图在动态html内容上创建一个jquery对话框。我尝试了两种不同的方式。可能是这样，它不起作用？代码的错误之处是什么。请帮助我。

1次尝试$('#opener').on('click', function(){ //action });

2尝试$(document).on('click', '#opener', function(){ //action });

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Animation</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<button id="opener">Open Dialog</button>

<div id="new_dialog_area"></div>
</body>
</html>


<script>

$(function() {

  function makedialog(){
     var htmlData = '<div id="dialog" title="Basic dialog">';
       htmlData += '<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>';
       htmlData += '</div>';
       $('#new_dialog_area').html(htmlData);
  }

//  $('#opener').on('click', function(){
  $(document).on('click', '#opener', function(){
    makedialog();
   $("#dialog").dialog({
    autoOpen:false,
   });
   $("#dialog").dialog("open");
 });

});
</script>

Answer 1

我认为这是另一个错误

change this  'x' to  \'x\'

在第一种情况下，它被视为变量

在第二个中，它被视为引号中的简单字符串/字符

htmlData += '<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the \'x\' icon.</p>';
       htmlData += '</div>';

演示：jsfiddle

秒继续阅读@J。 C. Rocamonde的答案：answer

Answer 2

除了@Leo的答案是正确的（您必须在单引号内转义单引号字符）之外，您还应该在html内添加脚本标签，最好在body标记的末尾添加

<html>
<head></head>
<body>
<!-- all your bodycontent goes here --> 
<!-- your script goes here: --> <script>...</script>
</body>
</html>

您需要了解更多有关此内容的信息，可以查看：Where should I put <script> tags in HTML markup?

对于字符串转义，对于JavaScript解释器读取代码的方式，当您使用引号将字符串开头时，它将理解，再次使用该引号时，字符串已结束。如果不是，那么如何分辨您何时实际使用引号字符或何时结束字符串？因此，要解决该问题，您必须使用反斜杠在字符串中添加特殊字符。

要了解有关字符串转义的更多信息，请检查以下答案：What does it mean to escape a string?

也请在调试时务必检查浏览器的控制台，因为字符串转义错误是一种基本的语法错误，如果您仔细查看代码和控制台日志，就会发现。

Answer 3

您需要转义'，否则会认为您即将在X之前结束。您也可以改用" "。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Animation</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<button id="opener">Open Dialog</button>

<div id="new_dialog_area"></div>
</body>
</html>


<script>

$(function() {

  function makedialog(){
     var htmlData = '<div id="dialog" title="Basic dialog">';
       htmlData += '<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the \'x\' icon.</p>';
       htmlData += '</div>';
       $('#new_dialog_area').html(htmlData);
  }

//  $('#opener').on('click', function(){
  $(document).on('click', '#opener', function(){
    makedialog();
   $("#dialog").dialog({
    autoOpen:false,
   });
   $("#dialog").dialog("open");
 });

});
</script>

jQuery对话框不会打开？

3 个答案: