Question

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

<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>

感谢您的帮助！

Answer 1

我希望你现在正在使用jquery＆gt; 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" );
                }
            },
        });
    });

jjery ui按钮在ajax调用后没有重置

1 个答案: