Нажмите, чтобы не работать

У меня есть таблица, созданная динамически и назначенная событие click, но это событие не работает во всех ячейках, только в фиксированной строке. Какая у меня ошибка, пожалуйста, помогите мне.Нажмите, чтобы не работать

Вот мой код:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page Title</title> 
     <script type="text/javascript" src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       var cardRules = new Array(); 
       $.get('UserFile.txt', function(data){ 
         cardRules = data.split('\n'); 
         // console.log(cardRules.length); 
         for (i = 0; i<cardRules.length; i++) { 
          // console.log(cardRules[i]); 
          var cardParts = cardRules[i].split(","); 
          // console.log(cardParts.length); 
          var out = "<tr>"; 
          for (y = 0; y<cardParts.length; y++) { 
           // console.log(cardParts[y].replace("[", "").replace("]", "").replace(/"/g, '')); 
           // out += "<td>" + cardParts[y].replace("[", "").replace("]", "").replace(/"/g, '') + "</td>"; 
           out += "<td>Part " + i + " " + y + "</td>"; 
          } 
          out += "</tr>"; 
          // console.log(out+'\n'); 
          $('#tab').append(out); 
         } 
        }); 

        $('#tab tr td').eq(2).on('click', function() { 
         console.log("Klick"); 
        }); 
      });  
     </script> 
    </head> 
<body> 

<table id="tab" border="1"> 
<tr> 
<td>col1</td> 
<td>col2</td> 
<td>col3</td> 
</tr> 
</table> 

</body> 
</html>

источник

2013-05-29 Frithjof Schaefer

Вы должны использовать делегирование для динамических добавленных элементов:

http://jsfiddle.net/UkVSh/

$(document).on('click', '#tab tr td', function() { 
    if($(this).index() === 2) 
     alert("Klick"); 
});

Если вы ждали DOM кода готов или поставить скрипт только перед закрытием тега body вы можете использовать #tab в качестве делегата. Было бы лучше, чем использовать документ.

источник

2013-05-29 15:10:02

К сожалению, работает не мной? –

Вы имеете в виду, что он не работает? –

Не работает @roasted: http://jsfiddle.net/imac/zTAW3/5/ Только для первой строки. – Alvaro

Вы добавляете событие on в третий столбец каждой строки.

Кроме того, как @roasted сказал, что вам нужно использовать on событие по модифицированному элемента, в данном случае, лучше, чем document или body#tab просто:

Попробуйте это:

$('#tab ').on('click','tr td', function() { 
    if($(this).index() == 2){ 
     alert("Klick"); 
    } 
});

http://jsfiddle.net/imac/zTAW3/4/

источник

2013-05-29 15:19:59 Alvaro

«Индекс», указывающий положение элементов на основе 0.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page Title</title> 
     <script type="text/javascript" src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       var cardRules = new Array(); 
       $.get('UserFile.txt', function(data){ 
         cardRules = data.split('\n'); 
         // console.log(cardRules.length); 
         for (i = 0; i<cardRules.length; i++) { 
          // console.log(cardRules[i]); 
          var cardParts = cardRules[i].split(","); 
          // console.log(cardParts.length); 
          var out = "<tr>"; 
          for (y = 0; y<cardParts.length; y++) { 
           // console.log(cardParts[y].replace("[", "").replace("]", "").replace(/"/g, '')); 
           // out += "<td>" + cardParts[y].replace("[", "").replace("]", "").replace(/"/g, '') + "</td>"; 
           out += "<td>Part " + i + " " + y + "</td>"; 
          } 
          out += "</tr>"; 
          // console.log(out+'\n'); 
          $('#tab').append(out); 
         } 
        }); 

        $(document).ready(function() { 

     $('#tab tr td.cel').on('click', function() { 
      console.log("Klick"); 
      alert($(this).text()); 
     }); 
    });  
      });  
     </script> 
    </head> 
<body> 

<table id="tab" border="1"> 
<tr> 
<td>col1</td> 
<td class="cel">col2</td> 
<td>col3</td> 
</tr> 
    <tr> 
<td>col1</td> 
<td class="cel">col22</td> 
<td>col32</td> 
</tr> 
    <tr> 
<td>col13</td> 
<td class="cel">col23</td> 
<td>col33</td> 
</tr> 
</table> 

</body> 
</html>

Я считаю, что таким образом он работает http://jsfiddle.net/pborreli/pJgyu/

источник

2013-05-29 15:36:09 Leonardo

Нажмите, чтобы не работать

ответ

Смежные вопросы