0

我有一个表单，允许用户更改他的名字和姓氏。表单的工作方式是单击编辑按钮并在屏幕上显示一个对话框。

<div id="nameChange">
<table width="695">
<tr>        
        <td style="padding: 5px;"><strong>First Name</strong></td>
        <td style="padding: 5px;" align="right"><?=$firstName?></td>
    </tr>
    <tr>
        <td style="padding: 5px;"><strong>Last Name</strong></td>
        <td style="padding: 5px;" align="right"><?=$lastName?></td>
    </tr>
    <tr>
        <td style="padding: 5px;"></td>
        <td style="padding: 5px;" align="right" ><button name="editName" id="editName">Edit</button></td>
    </tr>
</table>

这是单击按钮时起作用的jQuery

$("#editName").button().click(function(){
            $("#editUserInfoForm").dialog({
                height: 200,
                width: 300,
                modal: true,
                buttons: {
                    "Apply": function(){
                        var firstName = $("#newFirstName").val();
                        var lastName = $("#newLastName").val();
                        var userID = $("#userID").val();
                        var email = $("#email").val();
                        var str = "first="+firstName+"&last="+lastName+"&userID="+userID+"&email="+email;

                        $.ajax({
                            url : "ajax/editName.php",
                            type : "post",
                            data : str,
                            success : function(result){
                                $("#nameChange").html(result);
                            }
                        });
                        $( this ) .dialog( "close" );
                    },
                    Cancel: function(){
                        $( this ) .dialog( "close" );
                    }
                },
            });
        });

正如你所看到的，有一个名为editName.php的文件的AJAX调用......代码运行良好......第一次，但是当重新加载div时，按钮恢复正常，没有jQuery 按钮设计，然后完全停止运行（当我单击它时没有任何反应）。理想情况下，我希望用户在犯错时继续进行其他更改。

这是editName.php的内容

<?php

$firstName = $_POST['first'];
$lastName = $_POST['last'];
$userID = $_POST['userID'];
$email = $_POST['email'];



?>

<div id="nameChange">
    <table width="695">
    <tr>        
            <td style="padding: 5px;"><strong>First Name</strong></td>
            <td style="padding: 5px;" align="right"><?=$firstName?></td>
        </tr>
        <tr>
            <td style="padding: 5px;"><strong>Last Name</strong></td>
            <td style="padding: 5px;" align="right"><?=$lastName?></td>
        </tr>
        <tr>
            <td style="padding: 5px;"></td>
            <td style="padding: 5px;" align="right" ><button name="editName" id="editName">Edit</button></td>
        </tr>
    </table>
</div>

谢谢你们的帮助！

4

1 回答 1

1

我希望你现在使用 jquery > 1.7

在这种情况下，而不是你的代码，使用它。这应该可以帮助您在通过 ajax 附加 html 后再次单击该按钮。还要在单击之前放置 button() 调用设计，不确定是否会保持其样式，但首先要让单击正常工作

$("#editName").button();
$("#nameChange").on('click', "#editName" ,function(){
        $("#editUserInfoForm").dialog({
            height: 200,
            width: 300,
            modal: true,
            buttons: {
                "Apply": function(){
                    var firstName = $("#newFirstName").val();
                    var lastName = $("#newLastName").val();
                    var userID = $("#userID").val();
                    var email = $("#email").val();
                    var str = "first="+firstName+"&last="+lastName+"&userID="+userID+"&email="+email;

                    $.ajax({
                        url : "ajax/editName.php",
                        type : "post",
                        data : str,
                        success : function(result){
                            $("#nameChange").html(result);
                        }
                    });
                    $( this ) .dialog( "close" );
                },
                Cancel: function(){
                    $( this ) .dialog( "close" );
                }
            },
        });
    });
于 2013-10-19T13:03:59.860 回答