根据触发器锚文本在Jquery UI对话框中创建动态按钮名称

Question

我已经完成了一个jquery UI对话框，它可以工作，但是我需要将a标签的值（名称）传递给jquery中的按钮，但是一直在寻找并尝试许多不同的东西，但没有什么：

我得到了：

标记（由PHP填充的值）：

<a href="#" class="name">'.$name.'</a>

HTML div：

<div id="name" title="view or send this user a message?"></div>

jQuery的：

$(document).ready(function() {
  $(function() {
    $( "#name" ).dialog({
      autoOpen: false,
      width: 500,
      show: {
        effect: "fold",
        duration: 500
      },
      hide: {
        effect: "explode",
        duration: 500
      },
      buttons: {
                    //Names need to go here as part of the buttons
        "Send " + $(this).data('name') + " a message": function() {
          $( this ).dialog( "close" );
        },
        "view " + $(this).data('name') + "profile ": function() {
          $( this ).dialog( "close" );
        }
      }
    });

    $( "a.name" ).click(function() {
    //Pass name to form
    $("#name").data('name', $("a#name").text());
    $( "#name" ).dialog( "open" );
  });
});

}）;

所以我需要从a＃name获取名称，然后尝试使用.text（）。 用于按钮的jquery。

谢谢你的帮助 ：）

Answer 1

对话框创建中存在很多问题，请尝试这种方式。

您在创建按钮时串联了object属性，这是无效的语法，此外还尝试在初始化期间尚不存在的data('name')进行访问。 而是在需要时创建按钮，即在您单击超链接的对话框显示之前，在那里您知道需要在按钮后面附加什么name 。

小提琴

 $(function () { // Same as document ready. only one of them is needed. No need to chain them

    var dial = $("#name").dialog({
        autoOpen: false,
        width: 500,
        show: {
            effect: "fold",
            duration: 500
        },
        hide: {
            effect: "explode",
            duration: 500
        }
    });

   $("a.name").click(function () {
     //Pass name to form
     var name = $(this).text();
     dial.dialog({
        buttons: getButtons(name),
        autoOpen:true
     })
   });
});

function getButtons(name) {
    var dialog_buttons = {}; //Create the buttons here.
    dialog_buttons["Send " + name + " a message"] = buttonCallBack; //set the call back.
    dialog_buttons["view " + name + " profile"] = buttonCallBack; // assign different call back if required
    return dialog_buttons;

}

function buttonCallBack() {
    $(this).dialog("close");
}

Answer 2

您的a标签选择器错误。 更改

$("#name").data('name', $("a#name").text());

至

$("#name").data('name', $('a.name').text());