Jquery ui 在单个wep页面中使用双jQuery

由于我无法在一个页面中创建两个表单，因此我尝试使用两种不同的jQuery：

$（文档）.ready（函数（）{

使用不同的按钮打开同一表单作为函数提供了自定义新标题和按钮的功能

这是我的代码：

 <p><button id="newuserbutton" >Create New User</button></p>
 <p><button id="edituser" >Update User</button></p>

 <script "text/javascript">

    $(document).ready(function () {

        $('#div1').dialog({

            modal: true,
            autoOpen: false,
            title: 'Create new user',
            buttons: {
                "Create User": function () {
                    $(this).dialog("");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });



        $('#newuserbutton').click(function () {
            $('#div1').dialog('open');
            $("#div1").css("color", "grey");
            $("#div1").dialog({ minHeight: 300, minWidth: 550 });
            //   $("*").css('color', 'red');
        });



    });

</script>


<script>

     $(document).ready(function () {

        $('#div1').dialog({

            modal: true,
            autoOpen: false,
            title: 'Edit user',

            buttons: {
                "Save Changes": function () {
                    $(this).dialog("");
                },
                "Delete": function () {
                    $(this).dialog("alert");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }


        });

        $('#edituser').click(function () {
            $('#div1').dialog('open');
            $("span.ui-dialog-title").text('Edit User');
            $("#div1").css("color", "grey");
            $("#div1").dialog({ minHeight: 300, minWidth: 500 });
        });

    });


</script>

创建新用户

更新用户

$（文档）.ready（函数（）{
$（'#div1'）。对话框({
莫代尔：是的，
自动打开：错误，
标题：“创建新用户”，
按钮：{
“创建用户”：函数（）{
$（此）.dialog（“”）；
},
“取消”：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
$（'#newuserbutton'）。单击（函数（）{
$（'div1'）。对话框（'open'）；
$（“#div1”）.css（“颜色”、“灰色”）；
$（“#div1”）.dialog（{minHeight:300，minWidth:550}）；
//$（“*”）.css（'color'，'red'）；
});
});
$（文档）.ready（函数（）{
$（'#div1'）。对话框({
莫代尔：是的，
自动打开：错误，
标题：“编辑用户”，
按钮：{
“保存更改”：函数（）{
$（此）.dialog（“”）；
},
“删除”：函数（）{
$（此）.dialog（“警报”）；
},
“取消”：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
$（'#edituser'）。单击（函数（）{
$（'div1'）。对话框（'open'）；
$（“span.ui对话框标题”）.text（“编辑用户”）；
$（“#div1”）.css（“颜色”、“灰色”）；
$（“#div1”）。对话框（{minHeight:300，minWidth:500}）；
});
});

我单击了不同的按钮，但表单一路上都会打开三个按钮，这是第二个jquery

---

如何将这些多个jQuery一起使用？或者如果有任何方法可以在jQuery函数中创建一个新表单？感谢您的建议。

问题是，您在同一个div上使用id

\div1

两次初始化jQuery ui小部件模式。总而言之，这就是您正在做的：

$(#div1)
    .dialog({...})
    .dialog({...});

当然，当您随后调用

$（#div1）.dialog（'open'）

时，模式将根据第二次初始化打开，也就是说，使用3个按钮“保存更改”、“删除”和“取消”打开模式

您必须使用两个不同的div（最简单方式），或者仅使用一个div并在模式打开（最干净方式）上管理模式内容

---

我写这篇文章是为了用第二种方式展示；）

这就是我想做的。非常感谢！顺便说一句，如果我们想在第二页的表单中添加第三次单击功能，我想使用ajax，这可能吗？我不太明白你的意思。你想“保存更改”吗按钮来执行ajax调用？或者您想在点击“编辑用户”按钮后在对话框模式中添加内容？