当用户单击第二行中的“编辑”按钮时无法调用 jquery 函数

Unable to call jquery function when user clicks on Edit button in the second row

本文关键字：按钮 编辑 函数 jquery 调用 单击 用户 二行      更新时间：2023-09-26

我是jquery的新手，因此问这个愚蠢的问题。

每当我单击添加计划时，都会创建一个新行。 但是当我单击第二行中的"编辑"按钮时，该特定的jQuery 功能（.editbtn）未被调用，请在此问题上帮助我。

这是我的HTML代码。

<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file="../includes/taglib.jsp"%>

<security:authorize
access="hasAnyRole('SUPER_USER_EDIT', 'USER_EDIT', 'SUPER_USER_VIEW', 'USER_VIEW', 'INQUIRY_VIEW')">

<tiles:putAttribute name="title" cascade="false">Employer Details</tiles:putAttribute>
<tiles:putAttribute name="body_content" cascade="true">
    <div class="container">
        <div class="row">
            <div class="block-header">
                <h2>Employer Details</h2>
            </div>
            <div class="card">
                <div class="card-body card-padding">
                    <table style="border-spacing: 50px; width: 50%;">
                        <tr>
                            <td><span class="input-group-addon  text-left p-5"><strong>Entity
                                No</strong></span> <span class="input-group-addon  text-left">1234567890</span>
                            </td>
                            <td><span class="input-group-addon  text-left p-5"><strong>Enterprise
                                Id</strong></span> <span class="input-group-addon  text-left">EM
                                12345678</span>
                            </td>
                            <td><span class="input-group-addon  text-left p-500"><strong>Name</strong></span>
                                <span class="input-group-addon  text-left">Accuride
                                Corporation</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="block-header">
                <h2>Employer Plan History</h2>
            </div>
            <div class="card">
                <div class="card-body card-padding">
                    <input type="button" value="Add Plan" id="add_plan" onclick="addPlan('employerPlanHistory')"/>
                    <table id="employerPlanHistory" style="border-spacing: 50px; width: 100%;">
                        <thead>
                            <tr>
                                <TH id="planType"><FONT COLOR=grey FACE="Geneva, Arial" SIZE=3>Plan Type></FONT></TH>
                                <TH><FONT COLOR=grey FACE="Geneva, Arial" SIZE=3>Description></FONT></TH>
                                <TH><FONT COLOR=grey FACE="Geneva, Arial" SIZE=3>Version></FONT></TH>
                                <TH><FONT COLOR=grey FACE="Geneva, Arial" SIZE=3>Effective From></FONT></TH>
                                <TH><FONT COLOR=grey FACE="Geneva, Arial" SIZE=3>Effective To></FONT></TH>
                                <TH><FONT COLOR=grey FACE="Geneva, Arial" SIZE=3>Active></FONT></TH>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id="tableRow" class="edit">
                                <td id="planType" contenteditable="false" style="min-width: 100px; max-width: 100px;">
                                    <select name="plantype">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                    </select>
                                </td>
                                <td id="desc" contenteditable="false">Vitality</td>
                                <td id="version" contenteditable="false">1</td>
                                <td id="effDate" contenteditable="false">12/12/2015</td>
                                <td id="endDate" contenteditable="false">12/12/2019</td>
                                <td id="active" contenteditable="false">Yes</td>
                                <td>
                                    <button class="editbtn"/>
                                        Edit
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="block-header">
                <h2>Employer Contact History</h2>
            </div>
            <div class="card">
                <div class="card-body card-padding">
                    <table style="border-spacing: 50px; width: 100%;">
                        <thead>
                            <tr>
                                <button type="button">Add Contract</button>
                                <button type="button">Save</button>
                                <button type="button">Cancel</button>
                                <br><br>
                                <TH><FONT COLOR=grey FACE="Geneva, Arial" SIZE=3>Contract No</FONT></TH>
                                <TH><FONT COLOR=grey FACE="Geneva, Arial" SIZE=3>Start Date</FONT></TH>
                                <TH><FONT COLOR=grey FACE="Geneva, Arial" SIZE=3>End Date</FONT></TH>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>12/12/2015</td>
                                <td>12/12/2019</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>  
    </div>
</tiles:putAttribute>
<tiles:insertDefinition name="DEFAULT_LAYOUT" />

$(document).ready(function () {
      var jqueryFunction=$('.editbtn').click(function () {
          alert("jquesy");
          var currentTD = $(this).parents('tr').find('td');
          if ($(this).html() == 'Edit') {                  
              $.each(currentTD, function () {
                  $(this).prop('contenteditable', true)
              });
          } else {
             $.each(currentTD, function () {
                  $(this).prop('contenteditable', false)
              });
          }
          $(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
      });
  });
function addPlan(tableID){
    var table = document.getElementById(tableID).getElementsByTagName('tbody')[0]; 
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for(var i=0;i<colCount;i++){
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;   
    } 
}
function onEdit(btn)
{
    var id=btn.id;
    if(btn.value=="Edit")
    {
    document.getElementById('planType'+id).removeAttribute("Readonly");
    document.getElementById('desc'+id).removeAttribute("Readonly");
    document.getElementById('version'+id).removeAttribute("Readonly");
    document.getElementById('effDate'+id).removeAttribute("Readonly");
    document.getElementById('endDate'+id).removeAttribute("Readonly");
    document.getElementById('active'+id).removeAttribute("Readonly");

    document.getElementById(id).value="Save";
    return false;
    }
    if(btn.value=="Save")
    {
    document.getElementById('planType'+id).setAttribute("Readonly" , "readonly");
    document.getElementById('desc'+id).setAttribute("Readonly" , "readonly");
    document.getElementById('version'+id).setAttribute("Readonly" , "readonly");
    document.getElementById('effDate'+id).setAttribute("Readonly" , "readonly");
    document.getElementById('endDate'+id).setAttribute("Readonly" , "readonly");
    document.getElementById('active'+id).setAttribute("Readonly" , "readonly");

    document.getElementById(id).value="Edit";
     return false;
    }
}

使用事件委托将事件绑定到动态添加的元素。

$('.editbtn').click(functions(){}) 只会将 click 事件绑定到.editbtn元素，该元素在超过此代码时存在于 DOM 中。这不适用于之后添加的元素。

在这些情况下，您需要基于父元素绑定事件，该父元素从加载 DOM 时就存在。

例如：$(document).on('click', '.editbtn', function() {}) 

$(document).ready(function() {
    $(document).on('click', '.editbtn', function() {
        alert("jquery");
        var currentTD = $(this).closest('tr').find('td');
        if ($(this).html() == 'Edit') {
            $.each(currentTD, function() {
                $(this).prop('contenteditable', true)
            });
            $(this).html('Save');
        } else {
            $.each(currentTD, function() {
                $(this).prop('contenteditable', false)
            });
            $(this).html('Edit')
        }
    });
});

事件委托允许我们将单个事件侦听器附加到父元素，该侦听器将为所有与选择器匹配的后代触发，无论这些后代现在存在还是将来添加。这意味着，每当您创建新字段时，过去发生的事情是新行中创建的 EDIT 按钮上没有事件侦听器。事件委托通过向每个动态创建的字段添加一个事件侦听器来解决此问题，以便通过 addPlan 函数中的 for 循环创建的所有字段。@Rejithrkrishnan在他的代码中为您提供了解决方案。

$(document).ready(function() {
$(document).on('click', '.editbtn', function() {
    alert("jquery");
    var currentTD = $(this).closest('tr').find('td'); //look closely here for his revision
    if ($(this).html() == 'Edit') {
        $.each(currentTD, function() {
            $(this).prop('contenteditable', true)
        });
        $(this).html('Save');
    } else {
        $.each(currentTD, function() {
            $(this).prop('contenteditable', false)
        });
        $(this).html('Edit')
    }
});
});
相关文章：