Question

我在我的ASP.NET masterPage.master中有表单，如果我点击提交，它会通过ajax从masterPage.master.cs文件调用一些方法（我在更新面板中有它）。但我想用jQuery改进它。所以我有这个：

$('#submit').click(function () {
            $.ajax({
                type: "POST",
                url: '<% Response.Write("~"+Request.Path); %>',
                beforeSend: function () {
                    $(document.createElement('div')).width($('#formBox').width())
                    .height($('#formBox').height())
                    .css({ backgroundImage: 'url(/Static/Img/bc_overlay.png)', position: 'absolute', left: 0, top: 0, margin: "5px", textAlign: "center", color: "#000", display: "none" })
                    .append("<strong>Načítám</strong><br /><img src='Static/Img/ajax-loader.gif' width='33px' height='33px' alt='loading' />")
                    .fadeIn("slow")
                    .prependTo($('#formBox'));
                    $('#formBox').css('position', 'relative');
                },
                success: function () {
                }
            });
        });

所以，如果我点击提交，新的div正在创建（有加载文字和图片，以及炫酷的不透明度叠加），但我如何给这个div一些ID？因为我需要使用它在

success: function () {
                    }

我需要清除此框并在此处写下一些文字（错误或成功）。

Answer 1

只需在创建属性时设置属性

$(document.createElement('div')).attr('id', 'theID')//rest of code

Answer 2

我喜欢这样创建元素：

    $('<div/>',{
        id: 'idhere',
        css:{
            width: $('#formBox').width(),
            height: $('#formBox').height()
        }
    });

等...

供参考 - 某些属性具有保留字/名称（请参阅MDN Reserved Words），因此如果要指定类，则需要包装属性名称：

        $('<div/>',{
            id: 'idhere',
            'class':'myclassname',
            css:{
                width: $('#formBox').width(),
                height: $('#formBox').height()
            }
        });

您当然可以为这个新元素指定一个名称，并在进行时更改它...

var div = $('<div/>',{
                id: 'idhere',
                'class':'myclassname',
                css:{
                    width: $('#formBox').width(),
                    height: $('#formBox').height()
                }
            });

$(div).prop('name','saymyname');

Answer 3

我没有完全了解您创建的设置。

成功函数实际上是用3个参数调用的。

success : function( data, textStatus, jqXHR ) {
}

您可以安全地忽略textStatus和jqXHR，然后只需编写

success : function( data ) {
}

数据元素是您从ajax调用中返回的结果。您可以在该数据中进行搜索以获得所需的ID。

另一种选择是通过简单的插入或追加调用从jQuery创建div并在脚本中创建id。（也许使用日期和时间是唯一的，或者只是获得最高的ID并增加一个计数器）然后你可以通过调用jquery来加载要放入div的html。

Answer 4

所有答案都有效。

另一种方式：

<强> HTML

<div id='container'></div>

<强> JQuery的

$('#container').append("<div id=\"id\"></div>");

或者：

 $('#container').append(createDiv('id', 'class'));

 var createDiv = function(newid, newclass) {
    return $('<div/>', {
              id: newid,
              class: newclass,
              css:{
                 width: "100px",
                 height: "100px"
              }
            });
 }

jQuery用ID创建新的div？

4 个答案: