Question

是否可以在jquery中序列化附加的表单？我尝试了button.on（点击）和form.on（提交），但遇到了问题。当我使用onclick按钮时，它给了我一个未定义的序列化。当我使用表单提交时，它什么也没给我。

这是我的JS代码：

function main_login(){

$('.main-login').click(function(){
var adpas = prompt("Enter password: ");
if(adpas !== null){
    $.ajax({
        type: 'post',
        url: 'init.php',
        data: {data: adpas},
        success: function(data){
    if(data == "success"){
            $('#main-note').css('display', 'initial');
            $('#main-note').append(''+
'<div id="note_app" style="height: 450px; width: 700px; background-color: white; border-radius: 10px;">'+
'<div style="height:12px; width:15px; border-radius:10px; background: linear-gradient(red, white);" align="center"><a href="index.html" onclick="close_window()" style="text-decoration: none; cursor: pointer;">X</a></div>'+
'<center><form action="" id="formmsg" method="post"><input type="text" id="note-title" style="width: 98%; height: 20px; font-size:16px"/>'+
'<textarea id="note-texts" style="width: 98%; height: 400px; resize: none;"></textarea></center>'+
'<input type="submit" value="Encode Lecture" name="btn-lecture" id="btn-lecture"></form></div>');

    $('#formmsg').on('submit', function() {
        alert($(this).serialize());
    });

    }

    else{
        alert('You don\'t have any administrative rights to open this link.');
    }



        }
    });

}
});

}

另一个问题：似乎每次成功点击“主登录类”时，它都会给我相同数量的div。无论如何只有在密码被接受并成功的情况下才能使按钮触发一次？

尝试过jQuery.one（）;它既有效又无法登录成功。

提前致谢。

Answer 1

基本上你试图将一个事件附加到一个动态创建的元素上！所以这里event delegation可以帮助你，而不是将事件保存在ajax的success内，这显然不是一件好事，把它放在外面！以下是您需要做的更改!!

$('.main-login').click(function(){
   var adpas = prompt("Enter password: ");
   if(adpas !== null){
       $.ajax({
          type: 'post',
          url: 'init.php',
          data: {data: adpas},
          success: function(data){
            if(data == "success"){
               $('#main-note').css('display', 'initial');
               $('#main-note').append(''+
'<div id="note_app" style="height: 450px; width: 700px; background-color: white; border-radius: 10px;">'+
'<div style="height:12px; width:15px; border-radius:10px; background: linear-gradient(red, white);" align="center"><a href="index.html" onclick="close_window()" style="text-decoration: none; cursor: pointer;">X</a></div>'+
'<center><form action="" id="formmsg" method="post"><input type="text" id="note-title" style="width: 98%; height: 20px; font-size:16px"/>'+
'<textarea id="note-texts" style="width: 98%; height: 400px; resize: none;"></textarea></center>'+
'<input type="submit" value="Encode Lecture" name="btn-lecture" id="btn-lecture"></form></div>');
             }
             else{
                alert('You don\'t have any administrative rights to open this link.');
             }
         }
       });
    }
});

现在您的表单submit事件：

$('#main-note').on('submit','#formmsg', function() {
    console.log($(this).serialize());
});

现在应该可以了。

javascript序列化附加的div

1 个答案: