jQuery中的动态寄存器onClick事件导致代码重复_Jquery

jQuery中的动态寄存器onClick事件导致代码重复

jquery

jQuery中的动态寄存器onClick事件导致代码重复,jquery,Jquery,我正在构建一个动态表单 <%@ 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="/st

我正在构建一个动态表单

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

您可以使用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();
});
});

正确的。从jQuery1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。较旧版本的jQuery用户应优先使用.delegate（），而不是.live（）。我适当地更新了我的答案。那么，既然我使用的是jquery 1.9.1，我应该使用on（）还是delegate（）。另外，非常感谢您在中介绍的技巧：新的on（）函数用于替换现有的绑定事件的单独方法。在使用jQuery1.9.1时，最好使用on（），如下所示：$（“body”）.on（'click'，'delete'，function（event）{…}）；再次感谢您的时间和帮助，先生！

$(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();
});
});