如何将动态html添加到jQuery对话框的文本字段中？

debugcn 发表于 Dev

龙卷风

我已经通过SO寻找这个问题的答案（在我看来这似乎很简单）。我想动态创建一个jquery对话框，但是我想让对话框的文本/正文包含一个href-需要与该对话框一起动态创建。就像是：

    var newDiv = $(document.createElement('div')); 
    var j = 1; 

    newDiv.dialog({
    resizable: false,
    height:240,
    modal: true,
    text: '<a href="html://test.com">test link' + j + ' within a dialog body</a>',
    title: "MyDialog",
    buttons: {
        "Add Related": function() {
            $( this ).dialog( "close" );
            window.location = "addRelated.php?id="+id;                
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
});

text参数似乎只接受文本。有人可以帮我吗？谢谢。

盖塔诺

创建div并将文本附加到它的一种方法是：

var j = 1;
var newDiv = $('<div/>').append('<a href="html://test.com">test link' + j + ' within a dialog body</a>');

jQuery UI对话框仅具有用于定义按钮标签的text属性（请参阅：option-buttons）。

所以我的片段是：

$(function () {
  var j = 1;
  var newDiv = $('<div/>').append('<a href="html://test.com">test link' + j + ' within a dialog body</a>');

  newDiv.dialog({
    resizable: false,
    height:240,
    modal: true,
    title: "MyDialog",
    buttons: {
      "Add Related": function() {
        $( this ).dialog( "close" );
        window.location = "addRelated.php?id="+id;
      },
      Cancel: function() {
        $( this ).dialog( "close" );
      }
    }
  });
});

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

实现此目的的另一种方法是基于open事件：

$(function () {
  var newDiv = $('<div/>');
  var j = 1;

  newDiv.dialog({
    resizable: false,
    height:240,
    modal: true,
    title: "MyDialog",
    buttons: {
      "Add Related": function() {
        $( this ).dialog( "close" );
        window.location = "addRelated.php?id="+id;
      },
      Cancel: function() {
        $( this ).dialog( "close" );
      }
    },
    open: function( event, ui ) {
      $(this).append('<a href="html://test.com">test link' + j + ' within a dialog body</a>');
    }
  });
});

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。