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

Question

我是第一次接触jquery，因此问了这个愚蠢的问题。

每当我单击Add plan时，就会创建一个新行。但是当我点击第二行的编辑按钮时，那个特定的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;
    }

}

Answer 1

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

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

在这些场景中，您需要基于父元素绑定事件，该父元素将在加载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')
        }
    });
});

Answer 2

事件委派允许我们将单个事件侦听器附加到父元素，该侦听器将为与选择器匹配的所有后代触发，无论这些后代现在存在还是将来添加。这意味着，每当您创建一个新字段时，在过去发生的情况是，在新行中创建的编辑按钮上没有事件侦听器。事件委派解决了这个问题，方法是向每个动态创建的字段添加一个事件侦听器，以便在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')
    }
});
});