0

我正在构建一个动态表单

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="/struts-tags" prefix="s" %>
<%@ taglib uri="/struts-dojo-tags" prefix="sx"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<html>
<head>
<script language="javascript" src="js/jquery-1.9.1.min.js"></script>
<script language="javascript" src="js/common.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Education List</title>
</head>
<body>
<s:form action="/save" method="POST">   
    <div class="educationForm">
        <c:if test="${ (not empty educations) }"> 
            <c:if test="${ fn:length(educations) ge 1 }">
                <c:forEach items="${educations}" var="edu" varStatus="status">
                    <div class="educations">                    
                        <label>Position</label><input type="text" name="educations[${ status.index }].index" value="${ educations[status.index].index }" /> <a href="" class="delete">Delete</a><br/>
                        <label>School</label><input type="text" name="educations[${ status.index }].school" value="${ educations[status.index ].school }" /><br/>
                        <label>Degree</label><input type="text" name="educations[${ status.index }].degree" value="${ educations[status.index ].degree }" /><br/>
                        <label>GPA</label><input type="text" name="educations[${ status.index }].scored" value="${ educations[status.index ].scored }" /><br/>
                        <label>Start Date</label><input type="text" name="educations[${ status.index }].startDate" value="${ educations[status.index].startDate }" /><br/>
                        <label>End Date</label><input type="text" name="educations[${ status.index }].endDate" value="${ educations[status.index].endDate }" /><br/>
                    </div>
                </c:forEach>        
            </c:if>         
        </c:if>
        <div class="educations">
            <label>Position</label><input type="text" name="educations[${fn:length(educations)}].index" value="${fn:length(educations) + 1}" /><a href="" class="delete">Delete</a><br/>
            <label>School</label><input type="text" name="educations[${fn:length(educations)}].school" /><br/>
            <label>Degree</label><input type="text" name="educations[${fn:length(educations)}].degree" /><br/>
            <label>GPA</label><input type="text" name="educations[${fn:length(educations)}].scored" /><br/>
            <label>Start Date</label><input type="text" name="educations[${fn:length(educations)}].startDate" /><br/>
            <label>End Date</label><input type="text" name="educations[${fn:length(educations)}].endDate" /><br/>
        </div>
    </div>  
    <a href="" id="addButton">Add new Edu</a>
    <input type="submit" value="Save" />        
</s:form>

<div class="template_educations" style="display:none">
    <div class="educations">
        <label>Position</label><input type="text" name="educations[_X_].index" value="_Y_" /><a href="" class="delete">Delete</a><br/>
        <label>School</label><input type="text" name="educations[_X_].school" /><br/>
        <label>Degree</label><input type="text" name="educations[_X_].degree" /><br/>
        <label>GPA</label><input type="text" name="educations[_X_].scored" /><br/>
        <label>Start Date</label><input type="text" name="educations[_X_].startDate" /><br/>
        <label>End Date</label><input type="text" name="educations[_X_].endDate" /><br/>
    </div>
</div>
</body>
</html>

对于每个educationsdiv，都会有一个.delete删除整个 div 的链接。用户可以使用链接添加更多educationsdiv 。#addButton

使用我当前的 jquery 函数，我可以处理删除功能，但它会导致代码重复。我的代码在 2 个地方重复：

  • .delete页面加载：如果删除这些代码，除非用户单击，否则不会注册链接中的 onClick 事件#addButton。换句话说，.delete如果用户没有#addButton事先点击，链接中的点击事件将不会触发

  • 添加按钮点击事件：如果删除这些代码，新添加的.delete链接将不会被注册

任何建议如何摆脱我的情况下的代码重复？对不起，如果这是一个愚蠢的问题。我是 jQuery 新手

$(document).ready(function(){

    //handle add new education
    $("#addButton").click(function(event){
        event.preventDefault();

        //append html inside template_educations div into educationForm div
        $(".educationForm").append($(".template_educations").html());

        //regist click event handle for button delete
        $(".delete").click(function(event){
            event.preventDefault();

            //delete parent tag with class = educations
            var parent = $(this).parents(".educations");
            parent.remove();
        });

        //loop through input tag inside educations div
        $(".educationForm").children(".educations").last().children("input").each(function(){           
            var count = $(".educationForm").children(".educations").length;

            //replace value of position textfield with current position
            var value = $(this).attr("value");
            if(typeof value !== 'undefined' && value !== false)
            {
                value = value.replace("_Y_", count);
                $(this).attr("value", value);
            }

            //replace educations list index in textfield
            var name = $(this).attr("name");
            name = name.replace("_X_", count);
            $(this).attr("name", name);

        });         
    });

    //handle delete education
    $(".delete").click(function(event){
        event.preventDefault();

        //delete parent tag with class = educations
        var parent = $(this).parents(".educations");
        parent.remove();
    });
});
4

1 回答 1

1

您可以使用delegate() jquery 方法，该方法基于一组特定的根元素，将处理程序附加到一个或多个与选择器匹配的所有元素的事件，现在或将来。

您的代码可能是：

$(document).ready(function(){

//handle add new education
$("#addButton").click(function(event){
    event.preventDefault();

    //append html inside template_educations div into educationForm div
    $(".educationForm").append($(".template_educations").html());

    //loop through input tag inside educations div
    $(".educationForm").children(".educations").last().children("input").each(function(){           
        var count = $(".educationForm").children(".educations").length;

        //replace value of position textfield with current position
        var value = $(this).attr("value");
        if(typeof value !== 'undefined' && value !== false)
        {
            value = value.replace("_Y_", count);
            $(this).attr("value", value);
        }

        //replace educations list index in textfield
        var name = $(this).attr("name");
        name = name.replace("_X_", count);
        $(this).attr("name", name);

    });         
});

//handle delete education
$("body").delegate('.delete', 'click', function(event){
    event.preventDefault();

    //delete parent tag with class = educations
    var parent = $(this).parents(".educations");
    parent.remove();
});
});
于 2013-04-03T11:49:36.830 回答