页面加载后创建的DOM元素不会触发Jquery事件

当html5数字字段发生更改时，我有一个触发calculate（）函数的页面我已经绑定了几乎所有我能想到的事件，它适用于最初加载的DOM元素。页面加载后创建的DOM元素不会触发Jquery事件

但是，如果我在加载dom之后添加元素，则更改函数不会触发。

我添加了一个运行calculate（）函数的按钮，单击它时会运行新创建的元素以及原始元素。

所以我知道代码的作品，但事件不会触发新创建的DOM元素。

jQuery的触发器

  $('.score').change(function() { 
       calculate(); 
      }); 
      $('.score').bind('keyup mouseup', function() { 
       calculate(); 
      }); 
      $('.score').mousewheel(function() { 
       calculate(); 
      }); 
      $('.score').click(function() { 
       calculate(); 
      }); 
      $('.score').keypress(function() { 
       calculate(); 
      });

计算功能

function calculate() { 
      $("tbody tr").each(function() { 
       row_total = 0; 
       $(".score", this).each(function() { 
        row_total += Number($(this).val()); 
       }); 
       $(".total", this).val(row_total); 
      }); 
      var arr = []; 
      var row = 0; 
      $("tbody tr").each(function() { 
       $(".total", this).each(function() { 
        arr[row] = $(this).val(); 
        row += 1; 
       }); 
      }); 
      var sorted = arr.slice().sort(function(a, b) { 
       return b - a 
      }) 
      var ranks = arr.slice().map(function(v) { 
       return sorted.indexOf(v) + 1 
      }); 
      row = 0; 
      $("tbody tr").each(function() { 
       $(".place", this).each(function() { 
        $(this).val(ranks[row]); 
        row += 1; 
       }); 
      }); 
      $("tbody tr").each(function() { 
       $(".place", this).each(function() { 
        var p = $(this).val(); 
        switch (p) { 
         case '1': 
          $(this).css('background-color', 'gold'); 
          break; 
         case '2': 
          $(this).css('background-color', 'silver'); 
          break; 
         case '3': 
          $(this).css('background-color', '#8c7853'); 
          break; 
         case '4': 
          $(this).css('background-color', 'white'); 
          break; 
         default: 
          $(this).css('background-color', 'white'); 
        } 
       }); 
      }); 
     }

GENROW功能

function genRow(i) 
     { 
      var x = ""; 
      for (var j = 0; j < i; j++) { 
       x += '<tr class="competitors">'; 
       x += '<td class="row">'; 
       x += '<input class="name" type="text" />'; 
       x += '</td>'; 
       x += '<td class="row">'; 
       x += '<input class="score" type="number" step="1" min="-100" max="100" value="0" />'; 
       x += '</td>'; 
       x += '<td class="row">'; 
       x += '<input class="score" type="number" step="1" min="-100" max="100" value="0" />'; 
       x += '</td>'; 
       x += '<td class="row">'; 
       x += '<input class="score" type="number" step="1" min="-100" max="100" value="0" />'; 
       x += '</td>'; 
       x += '<td class="row">'; 
       x += '<input class="score" type="number" step="1" min="-100" max="100" value="0" />'; 
       x += '</td>'; 
       x += '<td class="row">'; 
       x += '<input class="score" type="number" step="1" min="-100" max="100" value="0" />'; 
       x += '</td>'; 
       x += '<td class="row">'; 
       x += '<input class="total" type="text" value="0"/>'; 
       x += '</td>'; 
       x += '<td class="row">'; 
       x += '<input class="place" type="text" value="0"/>'; 
       x += '</td>'; 
       x += '</tr>'; 
      } 
      return x; 
     }

HTML代码

<body> 
    <table id="main"> 
     <tr> 
      <td class="header"> 
       Name 
      </td> 
      <td class="header judge"> 
       Judge 1 
      </td> 
      <td class="header judge"> 
       Judge 2 
      </td> 
      <td class="header judge"> 
       Judge 3 
      </td> 
      <td class="header judge"> 
       Judge 4 
      </td> 
      <td class="header judge"> 
       Judge 5 
      </td> 
      <td class="header btn"> 
       <input id="btn_Total" type="button" value="Total"/> 
      </td> 
      <td class="header h_place"> 
       Place 
      </td> 
     </tr> 
     <tr class="competitors"> 

     </tr> 
     <tr> 
      <td colspan="7"></td> 
      <td class="header btn"> 
       <input id="btn_AddRow" type="button" value="Add Row"/> 
      </td> 
     </tr> 
    </table> 
</body>

来源

2014-01-20 Talon06

阅读此篇http://stackoverflow.com/questions/11127453/jquery-show-not-working-after-added-a-new-element-in-document – Zzyrk

目前您正在使用的是被称为的直接绑定，它只会绑定到您的代码在进行事件绑定调用时存在于页面上的元素。

当需要动态生成元素或操作选择器（如删除和添加类）时，您需要使用Event Delegation使用.on()委托事件方法。

即

$(document).on('event','selector',callback_function)

例

$(document).on('click', '.score', function(){ 
    //Your code 
    alert("clicked me"); 
});

在地方的document你应该用最接近的静态容器。

委派事件的优点是它们可以处理后来添加到文档中的后代元素的事件。通过选择在委托事件处理程序附加时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并避免频繁附加和移除事件处理程序。

来源

2014-01-20 16:30:31 Satpal

谢谢，这对我来说非常合适。 – iboros

页面加载后创建的DOM元素不会触发Jquery事件

回答

相关问题