頁面加載後創建的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事件

回答

相關問題