Question

所以我有一个动态生成的表，在表的最后一行是一个带有数据库中每个人的唯一ID的href，它在一个超链接下，这样我就可以收集该人的ID，转移它到另一页并查看与特定ID关联的人员的详细信息。 href指向admin_edit.php，这是超链接指向唯一ID的页面。单击超链接后，现在处于当前状态，它将实际转到该页面。但我希望页面显示在jQuery对话框中。现在我以前做过这种事，但是用按钮。出于某种原因，我无法以超链接的形式实现这一点。

我的HTML / PHP / AngularJS代码： `

<div>
       <table>
               <tbody>                 
                <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                    <td>{{data.first_name}} {{data.last_name}}</td>
                    <td>{{data.team_name}}</td>
                    <td>{{data.role}}</td>
                    <td>{{data.phone}}</td>
                    <td>{{data.to_date}}</td>
                    <td>{{data.email}}</td>
                    <td><a id="modifyLink" href="admin/admin_edit.php?id={{data.id}}">{{data.id}}</a></td>   
                </tr>
                </tbody>
            </table>        
        </div>

        <div class="col-md-12" ng-show="filteredItems == 0">
            <div class="col-md-12">
                <h4>No data found</h4>
            </div>
        </div>
        <div class="col-md-12" ng-show="filteredItems > 0">    
            <div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div>
        </div>
    </div>
    <div id="modify" class="divider"></div> `

我的jQuery代码：

$(document).ready(function() { 
         var dlg=$('#modify').dialog({
           title: 'Modify',
           resizable: true,
           autoOpen:false,
           modal: true,
           hide: 'fade',
           width:600,
           height:500
         });


         $('#modifyLink').click(function(e) {
           dlg.load('admin/admin_edit.php');
           e.preventDefault();
           dlg.dialog('open');
        }); 
});

如何在对话框中的admin_edit.php中打开超链接，而不是转到物理网址？

Answer 1

这是一个例子

$(function() {
    $("a").click(function(e) {
        // Prevent default
        e.preventDefault();
        
        // Grab the url and do what you want with it
        alert($(this).attr("href"));
        
        // Grab the custom attribute
        alert($(this).data("id"));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="//raw.githubusercontent.com/xxxmatko/xDev.RequireJs/master/README.md" data-id="test" target="_blank">link</a>

Answer 2

由于您使用的是角度，因此请使用ng-click而不是使用jQuery onClick。然后，您可以将data.id传递给$scope。

中的某个功能

<a href ng-click="showDialog(data.id);" id="modifyLink">{{data.id}}</a>

然后在角度控制器中，创建showDialog函数以执行jQuery onClick正在执行的操作。

$scope.showDialog = function(id) {
    var dlg=$('#modify').dialog({
        title: 'Modify',
        resizable: true,
        autoOpen:false,
        modal: true,
        hide: 'fade',
        width:600,
        height:500
    });
    dlg.load('admin/admin_edit.php?id='+id);
    dlg.dialog('open');
};

在动态生成的href标记中使用jQuery Dialog

2 个答案: