我想用jquery ajax每点击save按钮时，在对应的div下插入一个投票模板，把数据插入数据库，并显示在页面上

Question

我想用jquery ajax每点击save按钮时，在对应的div下插入一个投票模板，把数据插入数据库，并显示在页面上
怎么区分第一次save投票模板和第二次save的投票模板的字段呢

$(function(){
//Add Vote click
        $('#btnAddVote').click(function () {
            $('#ivIID').val($('#sIID').html());
            $('#addVoteModal').modal('show');
        });

        //Save Vote click
        $('#btnSaveVote').click(function () {
            var VoteTitle = $('#ivTitle').val();
            $('.votelist').prepend('<div class="votearea" style="background-color:#c5d9f1;"> ' +
                                '<h4><div class="title" id="voteTitle"> Title:' + VoteTitle + '</div></h4><br><hr>' +
                                '<label> <input type="radio" name="member" value="agree" />Agree</label>' +
                                '<label id=agree style="margin-left: 20px;" > 8 </label><br>' +
                                '<label><input type="radio" name="member" value="against" />Not Agree</label> ' +
                                '<label id=notagree style=" margin-left: 20px;"> 2 </label><br><br>' +
                                '<div class="btn btn-info btn-sm" id="voteTitleSubmit" style="margin-left:80px;">Submit</div>' +
                            '</div>');

            //$('#agree').text("20");
            //alert($('#voteTitle').val());
            $('#addVoteModal').modal('hide');
        });
});

            @*Vote Area*@
            <div class="col-md-4">
                <div class="panel panel-primary" id="panelVoteArea">
                    <div class="panel-heading panel-heading_4">
                        <p class="panel-title">Vote Area</p>
                        <div class="btn-group pull-right btn-deatil">
                            @*   <div class="btn btn-info btn-sm">Detail</div>*@
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="panel-body">
                        <table class="table table-bordered">
                            <tbody>
                                <tr>
                                    <th>
                                        <button type="button" id="btnAddVote" data-toggle="modal" class="btn btn-sm btn-primary">ADD Vote</button>
                                    </th>
                                </tr>
                            </tbody>
                        </table>
                        <div class="votelist" id="VoteTemplate">

                        </div>
                    </div>
                </div>
            </div>
            
@*Vote Modal*@
<div class="modal fade" id="addVoteModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="voteDetails">Add Vote</h4>
            </div>
            <div class="modal-body">
                <table id="voteModalTable" class="table table-bordered" style="margin-top: 5px;">
                    <tbody>
                        <tr>
                            <th class="col-md-2">IID</th>
                            <td class="col-md-4">
                                <input type="text" class="form-control" id="ivIID" disabled="disabled" />
                            </td>
                        </tr>
                        <tr>
                            <th class="col-md-2">Vote Title</th>
                            <td class="col-md-4">
                                <input type="text" class="form-control" id="ivTitle" /></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="form-group col-md-6">
                    </div>
                    <div class="form-group col-md-6">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-default" id="btnSaveVote">Add</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>            

Answer 1

..你是要怎么区分，你可以在全局或是某个对象内维护一个变量用于记录点击次数，或是即时根据你的模板个数去判断是第几个。

Answer 2

我在拼接语句中加了事件和值传过去

    function voteLoad() {
        $.ajax({
            url: "/InitiativesDetails/VoteLoad",
            type: "POST",
            async: true,
            data: { "IID": $('#sIID').html() },
            dataType: "json",
            success: function (result) {
                if (result != null) {
                    for (var i = 0; i < result.length; i++) {
                        $('.votelist').append('<div class="voteArea' + result[i].VID + '" style="background-color:#c5d9f1; height:175px; border-bottom:solid 1px #CCC;"> ' +
                                 '<div class="voteRemove"><button class="close" id="btnVoteRemove' + result[i].VID + '" onclick=VoteRemove(' + result[i].VID + ')>' +
                                 '<span aria-hidden="true">×</span><span class="sr-only">Close</span></button></div>' +
                                 '<div class="voteTitle" id="voteTitle" style="padding-top:5px;"><h4> Title:' + result[i].VoteTitle + '</h4></div>' +
                                 '<br>' +
                                 '<label><input type="radio" name="member" value="agree" id="agreeRadio' + result[i].VID + '" />Agree</label>' +
                                 '<label id="agreeLabel' + result[i].VID + '" style="margin-left: 20px;" >' + result[i].Agreenum + '</label><br>' +
                                 '<label><input type="radio" name="member" value="against" id="notAgreeRadio' + result[i].VID + '" />Not Agree</label> ' +
                                 '<label id="notAgreeLabel' + result[i].VID + '" style="margin-left: 20px;">' + result[i].NotAgreenum + '</label><br><br>' +
                                 '<div class="pull-right"><button class="btn btn-info btn-sm" id="voteTitleSubmit' + result[i].VID + '" onclick=VoteSubmit(' + result[i].VID + ',' + result[i].IID + ') style="margin-right: 20px;">Submit</button></div>' +
                                 '</div>');
                    }
                }
            }
        });

    }
    
    

function VoteSubmit(VID, IID) {

    //alert('click!');
    var Agreenum = 0;
    var NotAgreeNum = 0;
    if ($('#agreeRadio' + VID).prop('checked') == false && $('#notAgreeRadio' + VID).prop('checked') == false) {
        alert('You have select your choice!');
    }
    else {
        if ($('#agreeRadio' + VID).prop('checked') == true) {
            Agreenum = 1;
        }
        if ($('#notAgreeRadio' + VID).prop('checked') == true) {
            NotAgreeNum = 1;
        }

        $.ajax({
            url: "/InitiativesDetails/VoteSubmit",
            type: "POST",
            async: true,
            data: {
                "VID": VID,
                "IID": IID,
                "Agreenum": Agreenum,
                "NotAgreeNum": NotAgreeNum
            },
            dataType: "json",
            success: function (result) {
                if (result != null) {
                    if (result == "Voted")
                    {
                        alert("You have Voted!");
                    }
                    else
                    {
                        alert("Submit Vote Success");
                        $('#agreeLabel' + VID).html(result[0].Agreenum);
                        $('#notAgreeLabel' + VID).html(result[0].NotAgreenum);
                    }
                }
                else {
                    alert("Submit Vote Failed");
                }
            }
        });
    }
}