如何创建具有不同内容的动态弹出窗口答案

【问题标题】：how to create Dynamic Popup With different Contents如何创建具有不同内容的动态弹出窗口
【发布时间】：2012-04-02 01:19:09
【问题描述】：

我正在创建一个每行不同的网格。每行的最后一个 td 是

  <a href="view_all" > View All</a>

现在点击它时，我想显示一个弹出窗口，其内容将与该行相同。

 <?php
$sr_no = 1;

foreach($this->paginator as $record){
    if($sr_no % 2 == 0)
        $style = 'class="even-row"';
      else
        $style = 'class="odd-row"';
        ?>  
                    <tr <?php echo $style;?>>
                            <td class="sorting_1"> <input type="checkbox" /> </td>
                            <td><?php echo $record['contact_first_name'];?></td>
                            <td><?php echo $record['contact_mobile_no'];?></td>
                            <td><?php echo $record['contact_home_no'];?></td>
                            <td><?php echo $record['contact_office_no'];?></td>
                            <td><?php echo $record['contact_email'];?></td>
                            <td><a id="view_all" href="" > View All</a></td>
                    </tr>
                   <?php $sr_no ++; }?>

在我的 java 脚本中我想在每个上都应用这个

$(document).ready(function() {
   $("#view_all").click(function(){
      //i want dialouge but all the contents of that row
        // $("#view_all").dialog();
   });
 });

【问题讨论】：

标签： jquery jquery-ui jquery-plugins jquery-selectors

【解决方案1】：

首先，如果有多行，您将无法使用view_all 作为名称。您可以将其设为类名，但 ID 在页面上必须是唯一的。所以我推荐这样的东西：

<a href="" class="view_all"> View All</a>

然后，您可以绑定到类，从行中提取详细信息并将其推送到对话框，然后显示它，如下所示：

// bind to the link's click event
$('.view_all').click(function(){

  // find the row
  var $tr = $(this).closest('tr');

  // grab the information (I don't know of another way other than use
  // column position. However, if you add classes or some other details
  // to the rows as their being output, this would be easier.
  var contact_first_name = $tr.children('td:eq(1)').text(),
      contact_mobile_no = $tr.children('td:eq(2)').text(),
      contact_home_no = $tr.children('td:eq(3)').text(),
      contact_office_no = $tr.children('td:eq(4)').text(),
      contact_email = $tr.children('td:eq(5)').text();

  // build the dialog
  var $dialog = $('<div>',{title:'Details'}).dialog({
    autoOpen: false
    // ...more dialog options...
  });

  // add details to dialog:
  $('<p>').text('First Name: ' + contact_first_name).appendTo($dialog);
  $('<p>').text('Mobile #: ' + contact_mobile_no).appendTo($dialog);
  /* ... */

  // show the dialog
  $dialog.dialog('open');
});

工作演示可以在这里找到：http://jsfiddle.net/ZJVcm/1/

【讨论】：

先生！一切正常，我的意思是我提醒正在访问的每个值，但对话框没有在最后显示。控制台也没有错误
@ShreyaGhoshal：您是否删除了// ...more dialog options... 并用您自己的选项替换它？（而且你不能因为上面一行的共同点而仅仅删除它，所以你也需要删除那个逗号）
当然我删除了它。并且没有添加我的选项我只需要那个弹出窗口。有什么要包含的内容吗？？
使用$('.view_all').on('click',function(){ 绑定到与选择器匹配的当前（和未来）元素。
@ShreyaGhoshal：基本上，使用.click(...) 会将点击事件附加到当前页面上的元素。通过使用.on('click',...)，您不仅可以匹配页面上的元素，还可以匹配稍后添加的元素（例如，使用 ajax 获取新项目的分页）

【解决方案2】：

如果上面的代码运行良好而不是替换你的这一行

$('.view_all').click(function(){

与

$('.view_all').on('click',function(){

你的问题解决了

【讨论】：

.live() 已被弃用，仅供参考。你现在应该使用.on()
感谢布拉德，这将起作用 $('.view_all').on('click',function(){