Question

我已经倾注了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参数似乎只带文字。有人可以帮我吗？感谢。

Answer 1

假设你在jQuery.ui中使用jQuery，你可以在div中创建所有的HTML：

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

因此，无需使用未记录的文本属性。

Answer 2

创建div并向其添加文本的方法是：

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

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

所以我的代码片段是：

＆＃13;

$(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" );
      }
    }
  });
});

＆＃13;

<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>

＆＃13;

实现此目标的另一种方法基于open event：

＆＃13;

$(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>');
    }
  });
});

＆＃13;

<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>

＆＃13;

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

2 个答案: