动态jQuery对话框

我经常来这里，发现这个地方很有用。我第一次发帖，希望有人能帮我

我有一个创建多个链接的页面。 单击链接时，会打开与该链接相关的特定对话框。该对话框包含一个表单，其中包含特定于该链接id的所有数据 但当我提交时，无论打开哪个对话框，属于第一个链接的数据都会提交

当我点击一个链接时，下面是根据

$link.attr（'href'）

保存按钮执行

$（'#prefForm'）。提交（）
现在我感觉到，当我点击一个链接时，它会打开所有对话框链接，将它们保留在后台，因此创建多个id prefForm，以便第一个链接的第一个id发送其数据

我不能分配不同的id，因为这些表单是动态生成的，id将是未知的

有人知道如何防止其他数据仅按需加载，而不是全部在后台加载吗

    $(document).ready(function() {
        $('#bidders td a').each(function() {
            var $link = $(this);
            var $dialog = $('<div></div>')
                .load($link.attr('href') + ' #content')
                .dialog({
                    autoOpen: false,
                    title: $link.attr('title'),
                    width: 600,
    buttons: [
        {
            text: "Cancel",
            className: 'cancelButtonClass',
            click: function() {
                $dialog.dialog('close');
            }
        },
        {
            text: "Save",
            className: 'saveButtonClass',
            click: function() { 
                 $('#prefForm').submit();
                 $dialog.dialog('close');
            }
        }

$（文档）.ready（函数（）{
$（'a'）。每个（函数（）{
var$link=$（此）；
变量$dialog=$（''）
.load（$link.attr（'href'）+'#content'））
.对话({
自动打开：错误，
标题：$link.attr（'title'），
宽度：600，
按钮：[
{
文本：“取消”，
类名：“cancelButtonClass”，
单击：函数（）{
$dialog.dialog（'close'）；
}
},
{
文字：“保存”，
类名：“saveButtonClass”，
单击：函数（）{
$（'#prefForm'）。提交（）；
$dialog.dialog（'close'）；
}
}
您正在使用.each（）-加载它们吗

$('#bidders td a').each(function() {

为什么不将其更改为。单击（）

$（'a'）。单击（功能（事件）{
event.preventDefault（）；
var$link=$（此）；
变量$dialog=$（''）
.load（$link.attr（'href'）+'#content'））
.对话({
自动打开：错误，
标题：$link.attr（'title'），
宽度：600，
按钮：[
{
文本：“取消”，
类名：“cancelButtonClass”，
单击：函数（）{
$dialog.dialog（'close'）；
}
},
{
文字：“保存”，
类名：“saveButtonClass”，
单击：函数（）{
$（'#prefForm'）。提交（）；
$dialog.dialog（'close'）；
}
}
您现在有了
。
$（文档）.ready（函数（）{
）中的每个
，这意味着您为每个匹配元素创建
GET

也许您可以将单击事件绑定到每个元素，然后发送
GET
并创建关于该事件的对话框

$(document).ready(function() {
    $('#bidders td a').click(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href') + ' #content')
            .dialog({
                autoOpen: false,
                title: $link.attr('title'),
                width: 600,
buttons: [
    {
        text: "Cancel",
        className: 'cancelButtonClass',
        click: function() {
            $dialog.dialog('close');
        }
    },
    {
        text: "Save",
        className: 'saveButtonClass',
        click: function() { 
             $('#prefForm').submit();
             $dialog.dialog('close');
        }
    }

$（文档）.ready（函数（）{
$（'a'）。单击（函数（）{
var$link=$（此）；
变量$dialog=$（''）
.load（$link.attr（'href'）+'#content'））
.对话({
自动打开：错误，
标题：$link.attr（'title'），
宽度：600，
按钮：[
{
文本：“取消”，
类名：“cancelButtonClass”，
单击：函数（）{
$dialog.dialog（'close'）；
}
},
{
文字：“保存”，
类名：“saveButtonClass”，
单击：函数（）{
$（'#prefForm'）。提交（）；
$dialog.dialog（'close'）；
}
}
您是如何通过单击或自动加载文档来打开对话框的？谢谢您的回复。您的回答很有道理，但该链接不再打开对话框。只有在调用每个对话框时，该链接才会打开对话框。单击并不是打开对话框，而是打开页面。问题在于提交功能。id#prefForm不是唯一的e，因为每个都加载了它们。单击有意义，但不会打开对话框。它使用preventDefault（）发送到完整页面，正如我在上面更新的那样。它阻止超链接工作（它不会加载页面，但（应该）触发所需的脚本。event.preventDefault（）；根本不打开任何内容，也不会弹出eitherOK。我找到了一个解决方案，正在发布。这可能会帮助像我这样的新手为每个表单id=“prefForm_u$bidid”创建一个唯一的id。我将$（'#prefForm'）.submit（）替换为$（this）。find（'form'）.submit（）；这似乎提交了正确的表单。单击并不是打开对话框，而是打开页面。正如您所说，由于对话框内容必须在后台才能加载，所以每个对话框都会获取所有内容。一旦获取所有内容，我如何仅发送所需的内容？好的。我找到了解决方案并正在发布。这可能会对像我这样的新手有所帮助。我为每个表单id创建了一个唯一的id=“prefForm_u$bidid”我将$（'#prefForm'）.submit（）替换为$（this）.find（'form'）.submit（）；这似乎是提交正确的表单
$(document).ready(function() {
    $('#bidders td a').click(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href') + ' #content')
            .dialog({
                autoOpen: false,
                title: $link.attr('title'),
                width: 600,
buttons: [
    {
        text: "Cancel",
        className: 'cancelButtonClass',
        click: function() {
            $dialog.dialog('close');
        }
    },
    {
        text: "Save",
        className: 'saveButtonClass',
        click: function() { 
             $('#prefForm').submit();
             $dialog.dialog('close');
        }
    }