Question

我（有点）重新提出这个问题，这是基于前一个问题：

multiple occurences of jquery dialog boxes on table rows in rails 3 - how do I do this?

我提供的上一个链接仅供参考。

经过几个小时的努力才能完成这项工作，我决定采取一大步，重新开始，基础知识。我的背景是我非常精通rails编程，而且Javascript（jQuery）并不那么热门。

我有一个表，希望能够使用jquery对话框更新每行中的两个字段，以便部分更新它们。

我设法让对话框弹出部分内容，但仅在第一行。 点击后续行中字段的链接不会产生任何结果（它们刚刚死亡）。

这是.js：

$(document).ready(function() {
$('div#status-chg-form').dialog({ autoOpen: false });
$('#statuslink').click(function(){ $('div#status-chg-form').dialog('open'); });
});

$(document).ready(function() {
$('div#eta-chg-form').dialog({ autoOpen: false });
$('#etalink').click(function(){ $('div#eta-chg-form').dialog('open'); });
});

在我的索引页面上是div，它们在各自的对话框中提供部分：

<div id="status-chg-form" title="CHANGE WORK ORDER STATUS" style="display:none"><%= render :partial => 'statusform' %></div>
<div id="eta-chg-form" title="CHANGE TECHNICIAN ETA" style="display:none"><%= render :partial => 'etaform' %></div>

最后，这里是链接，对表格的每一行重复：

        <%= link_to work_order.soft_completion_datetime.strftime('%m/%d/%Y %I:%M %p'), "#", :id => "etalink" %>
        <%= link_to status_display, "#", :id => "statuslink" %>

我知道我的问题是一个补救措施，因为有些东西我只是不了解.js。如果有人能指出我正确的方向，让这些对话框以最有效的方式为表格的每一行工作，那么我将永远为你负债。

我已经坚持了几天傻了。

Answer 1

1-如果您在页面上使用多个项目，请使用类而不是ID来选择要应用绑定的项目;
2-您可以将document ready事件的2个区块合并为一个;
3-要在行中使用对话框选择div，您可以使用closest()获得与您指定的选择器最接近的父级。

通过此更改，您的代码将如下所示：

$(document).ready(function() { 
    $('div.status-chg-form').dialog({ autoOpen: false }); 
    $('.statuslink').click(function(){ $(this).closest('div.status-chg-form').dialog('open'); }); 

    $('div.eta-chg-form').dialog({ autoOpen: false }); 
    $('.etalink').click(function(){ $(this).closest('div.eta-chg-form').dialog('open'); }); 
});

Answer 2

我猜你的问题是你的所有链接似乎都有id=statuslink，你不能拥有重复的ID。如果您只是将:id设置为:class，那么请将jQuery更改为使用.statuslink而不是#statuslink，它应该修复它。对于共享相同属性的任何其他元素也是如此。

表行上的jQuery对话框不起作用

2 个答案: