无法更改表中动态附加行的样式？

Question

我需要在 altKey 按下和鼠标悬停时更改背景和文本颜色。

问题是，我只能对 HTML 代码中显示的第一行执行此操作，而不能在之后使用 jQuery 附加的行中执行此操作。

HTML 代码：

  <div class = "table1">

  <table id = "t1" align="center" border=1>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email Address</th>
      <th>Telephone Number</th>
    </tr>
    <tr id = "r">
      <tbody>
        <td id = "d1" class = "el" contenteditable="true"></td>
        <td id = "d2" class = "el" contenteditable="true"></td>
        <td id = "d3" class = "el" contenteditable="true"></td>
        <td id = "d4" class = "el" contenteditable="true"></td>
        <td><button id="del1">Delete</button></td>
      </tbody>
    </tr>
  </table>

</div>

jQuery 代码：

$(document).ready(function(){
 $("#b1").click(function(){

 $('#t1 > tbody:last-child').append('<tr id = "r"><td id = "d1" class = "el" contenteditable="true"></td><td id = "d2" class = "el" contenteditable="true"></td><td id = "d3" class = "el" contenteditable="true"></td><td id = "d4" class = "el" contenteditable="true"></td><td><button id ="del1">Delete</button></td></tr>');
 });

 $("#t1").on('click','#del1',function(){
    $(this).parent().parent().remove();
 });

 function handler(ev) {
  var target = $(ev.target);
  var elId = target.attr('id');
  if( target.is(".el") ) {

     $(this).css("background-color","white");
     $(this).css("color","black");
  }
 }
 $(".el").mouseleave(handler);


 $(".el").bind('mouseenter keypress','.el', function(e) {
  if (e.altKey) {

         $(this).css("background-color","blue");
         $(this).css("color","red");

  }

 });
})

Answer 1

你很接近。问题是 handler 在附加行之前添加，因此它没有附加到动态添加的行。

在table 本身而不是rows 上添加event handler，然后在其中检查target。

Answer 2

当您的$(document).ready 函数运行时，事件会附加到 DOM 元素上，即使您动态添加更多具有相同类的元素，事件也不会附加到这些元素上，因为它们之前不存在。您需要将事件附加到您动态创建的任何新元素：

var btn = document.createElement("button");
btn.addEventListener('click', myFunc, false);
document.body.appendChild(btn);

Answer 3

无法更改表格中动态附加行的样式？

您需要委托事件：

这种方式是错误的：

$(".el").bind('mouseenter keypress','.el', function(e) {

在您的情况下，您需要：

$(document).on('mouseleave', '.el', handler);
$(document).on('mouseenter keypress', '.el', function(e) {...

更多详情请关注SO doc

ID 必须是唯一的。这意味着您可以获取最后一个数值并将其递增...

sn-p：

$(document).ready(function(){
  $("#b1").click(function(){
    var lastIdidx = +$('#t1 tr:last td[id]:last').attr('id').substr(1);
    $('#t1 > tbody:last-child').append('<tr id = "r"><td id = "d' + (lastIdidx + 1) + '" class = "el" contenteditable="true"></td>' +
                                       '<td id = "d' + (lastIdidx + 2) + '" class = "el" contenteditable="true"></td>' +
                                       '<td id = "d' + (lastIdidx + 3) + '" class = "el" contenteditable="true"></td>' +
                                       '<td id = "d' + (lastIdidx + 4) + '" class = "el" contenteditable="true"></td>' +
                                       '<td><button id ="del' + (lastIdidx + 5) + '">Delete</button></td></tr>');
  });

  $("#t1").on('click','#del1',function(){
    $(this).parent().parent().remove();
  });

  function handler(ev) {
    var target = $(ev.target);
    var elId = target.attr('id');
    if( target.is(".el") ) {

      $(this).css("background-color","white");
      $(this).css("color","black");
    }
  }
  $(document).on('mouseleave', '.el', handler);


  $(document).on('mouseenter keypress', '.el', function(e) {
    if (e.altKey) {
      $(this).css("background-color","blue");
      $(this).css("color","red");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="table1">
    <button id="b1">Add new Row</button>
    <table id="t1" align="center" border=1>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email Address</th>
            <th>Telephone Number</th>
        </tr>
        <tr id="r">
            <tbody>
            <td id="d1" class="el" contenteditable="true"></td>
            <td id="d2" class="el" contenteditable="true"></td>
            <td id="d3" class="el" contenteditable="true"></td>
            <td id="d4" class="el" contenteditable="true"></td>
            <td>
                <button id="del1">Delete</button>
            </td>
            </tbody>
        </tr>
    </table>
</div>