單擊表格列時點擊功能

我不明白爲什麼我的JavaScript中的點擊功能不起作用。我正在創建一個基於JSON文件中的值的表，並且我正在將表分配給表列。單擊表格列時點擊功能

下面是HTML的結構，一旦它從JavaScript的說：

$(function(){ 
    //Code that adds table goes here 

    $('#plane td.availableSeat').click(function() { 
    console.log('Clicked'); 
    $(this).className = 'selectedSeat'; 
    }); 
});

單擊功能似乎永遠不會被調用，即使我（覺得）的選擇是正確的？

任何人有任何建議嗎？

來源

2016-02-19 user3746428

是否所有的jquery在'$（document）.ready（）{}'？ – leDominatre

正如你在這裏看到你的代碼工作。 https://jsfiddle.net/pnz4re7w/

只要確保你的$('#plane td.availableSeat').click被稱爲AFTER，你從所述的JSON填充表。

現在看起來您正在分配負載上的點擊事件，然後填充表格。

來源

2016-02-19 00:58:26 Allen1200

點擊代碼肯定是在'$（function（）'中創建表的代碼之後創建的。 – user3746428

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <style> 
     table tr td { 
      border:dotted 2px red; 
     } 
     .selectedSeat { 
     color:blue; 
     } 
    </style> 
<script> 



    $(document).ready(function() { 
     var szTr='<tr>'; 
     szTr=szTr+'<td class="availableSeat">availableSeat</td>'; 
     szTr=szTr+'<td class="unavailableSeat">unavailableSeat</td>'; 
     szTr=szTr+'<td class="availableSeat">availableSeat</td>'; 
     szTr=szTr+'<td class="unavailableSeat">unavailableSeat</td>'; 
     szTr=szTr+'<td class="spacer">spacer</td>'; 
     szTr=szTr+'<td class="availableSeat">availableSeat</td>'; 
     szTr = szTr + '</tr>'; 
     $('table').append(szTr) 

    $('#plane').find('td.availableSeat').click(function() { 
     alert('Clicked'); 
     $(this).addClass('selectedSeat'); 
    }); 
}); 
</script> 
</head> 

<body style="width:50%;"> 
    <div id="plane"> 
    <table> 
     <tr> 
      <td class="availableSeat">availableSeat</td> 
      <td class="unavailableSeat">unavailableSeat</td> 
      <td class="availableSeat">availableSeat</td> 
      <td class="unavailableSeat">unavailableSeat</td> 
      <td class="spacer">spacer</td> 
      <td class="availableSeat">availableSeat</td> 
     </tr> 

     </table> 
     </div> 
</body> 
</html>

來源

2016-02-19 04:02:10 Aswathy

您的代碼不適用於動態添加的元素。在這種情況下，您必須使用jQuery's delegate函數，該函數將該事件附加到元素的某個父元素，並因此允許爲動態添加的子元素觸發事件。您的單擊事件處理程序代碼必須是這樣的：

$("#plane").delegate("td.availableSeat", "click", function() { 
    alert('Clicked'); 
    $(this).className = 'selectedSeat'; 
});

來源

2016-02-19 06:10:51

首先刪除當前的類，然後添加新的類 $（本）.removeClass（「availableSeat」）; $（this）.addClass（'selectedSeat'）;

來源

2016-02-19 06:29:31 devangana

不幸的是，我無法得到任何的工作建議，但我設法找到了解決方案。

我添加cell.onclick = updateSeatStatus;創造每個td元件的，並創造了這個功能：

function updateSeatStatus() { 
    this.className="selectedSeat"; 
}

工程完全按預期。

來源

2016-02-19 16:32:04 user3746428

單擊表格列時點擊功能

回答

相關問題