动态jQuery对话框

时间:2012-02-20 10:30:30

标签: jquery modal-dialog

我来这里很多,发现这个地方非常有用。我第一次发帖,希望有人能帮助我。

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

当我点击链接时,这是根据$link.attr('href')打开并正确填充对话框的代码 保存按钮执行$('#prefForm').submit(); 现在我感觉当我点击链接时,它打开所有对话框链接,将它们保留在后台,因此创建多个id prefForm,因此第一个链接的第一个链接发送其数据

我无法分配不同的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');
            }
        }

2 个答案:

答案 0 :(得分:0)

您正在使用.each() - 加载它们吗?

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

为什么不将它改为.click()?

$('#bidders td a').click(function(event) {
   event.preventDefault();
       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');
        }
    }

答案 1 :(得分:0)

.each中您现在$(document).ready(function() {,这意味着您为每个匹配元素创建了GET

也许你可以将click事件绑定到每个元素并发送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');
        }
    }