在 jQuery 对话框中创建链接

Question

这让我发疯了。几天来我一直在努力解决这个问题，看起来这应该很简单。我有一个我正在构建的 jQuery EasyUI 页面，它有一个数据网格，当您选择并单击一个按钮以获取详细信息时，它会打开一个对话框。这工作得很好。问题是我想在对话框底部添加一个按钮链接以及“默认”保存和取消按钮。

这个新按钮实际上只是指向另一个页面的重定向链接，它将显示所有选择的详细信息，而不仅仅是信息的一小部分。这是打开对话框的代码，下面是链接按钮的代码。

function editUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
    $('#dlg').dialog('open').dialog('setTitle','Prospect Details');
    $('#fm').form('load',row);
    url = 'update_user.php?id='+row.id;
    $('#dia_name').html(row.Name);
    $('#pd a').attr('href','prospect_details.php?phone=' + row.Phone);
    var phone = phoneFormat(row.Phone);
    $("#dia_phone").html(phone);
    if (row.message_duration > 0) {
        $('#hangup').hide();
        $('#message').show();
        $('#msg_txt').show();
    } else {
        $('#hangup').show();
        $('#message').hide();
        $('#msg_txt').hide();
    }
}

现在是链接按钮的代码。

<a id="pd" class="easyui-linkbutton" iconCls="icon-search">More Details</a>

这真的让我发疯了。我认为问题与调用 editUser 函数时不存在的链接按钮有关，因为它位于对话框窗口中。

Answer 1

正如我提到的，如果<a id="pd" class="easyui-linkbutton" iconCls="icon-search">More Details</a>，在您调用editUser() 时不存在，那么jQuery Selector 将不会拉任何东西。但是，我看到的另一个问题是您的选择器。

你确定你的意思是$('#pd a')？

这会拉出一个ID为pd的Element，然后寻找<a>的inner HTML标签，如：

<div id="pd">
    <a href="...">

如果您想要 ID 为 pd 的 <a> 标签，则选择器只需要 $('#pd')

---

可能的解决方案

如果在调用editUser() 之前，您的a 标签已经存在于HTML 中，那么您只需要调整：

// CHANGE 
$('#pd a').attr('href','prospect_details.php?phone=' + row.Phone);
// to 
$('#pd').attr('href','prospect_details.php?phone=' + row.Phone);

先试试这个。如果这不起作用，那么 a 标记在调用之前不存在，您应该附加它。当您使用 EasyUI 时，有几种方法可以做到这一点，尽管我怀疑前面的方法有效。如果没有：

最简单的可能是 .append() 按钮，然后使用 EasyUI 的 linkbutton 方法对其进行样式。

function editUser() {
    var row = $('#dg').datagrid('getSelected');
    if (row){
        $('#dlg').dialog('open').dialog('setTitle', 'Prospect Details');
        $('#fm').form('load',row);
        url = 'update_user.php?id='+row.id;
        $('#dia_name').html(row.Name);

        //  create variable for link
        var $href = 'prospect_details.php?phone=' + row.Phone;
        //  create the a tag
        $('<a />', { id: 'pd', class: 'easyui-linkbutton', href: $href })
        //  use jQuery Chaining to continue on and add this button to your dialog buttons
        .prependTo($('#dlg .dialog-button'))
        //  OR, IF YOU MEAN TO APPEND IT TO YOUR FORM USE:
        /*  .appendTo($('#fm')) */
        //  use EasyUI to make it a styled button matching the others
        .linkbutton({ iconCls: 'icon-search', text: 'More Details' });

        $("#dia_phone").html(phoneFormat(row.Phone));
        if (row.message_duration > 0) {
            $('#hangup').hide();
            $('#message, #msg_txt').show();
        }
        else {
            $('#hangup').show();
            $('#message, #msg_txt').hide();
        }
    }
}

或您可以在创建对话框时创建按钮，但您需要为所有对话框按钮执行此操作，例如：

function editUser() {
    var row = $('#dg').datagrid('getSelected');
    if (row){
        $('#dlg').dialog({
            buttons: [{
                iconCls: 'icon-search',
                text: 'More Details',
                handler: function(e) { /* DO WORK */ }
            }],
            title: 'Prospect Details'
        }); //  no need to call 'open', default is to open when called