2015-11-04 2 views
0

Я загружаю таблицу динамически, используя jQuery ajax, строки таблицы имеют «contenteditable = true», я пытаюсь прослушивать событие размытия для каждой ячейки, запускает функцию для динамического обновления этой ячейки. Проблема в том, что размытие события не запускается вообще, я пробовал разные селектора (таблица, тём и, наконец, весь документ), но все напрасно.событие jQuery blur не запускается для ячейки таблицы

<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title></title> 
     <script type="text/javascript" src='jquery-1.8.3.js'></script> 
    <link rel="stylesheet" href='jquery-ui-1.8.7.custom.css' type="text/css"> 
     <?php 
     include './datatable_include.php'; 
     ?> 
     <script type="text/javascript"> 

      $(function() { 
       $.ajax({//create an ajax request to load_page.php 
        type: "GET", 
        url: "load_table.php", 
        dataType: "html", //expect html to be returned     
        success: function (response) { 
         $('#dataTable').find('tbody').html(response); 
         initDataTable('#dataTable', null); 
        } 
       }); 
      }); 


      $(document).bind("blur", "td", (function() { 
       // this code isn't reached 
       alert("ahoo"); 

       var id = $(this).attr("id"); 
       var name = $(this).attr("name"); 
       var message_status = $("#status"); 
       var value = $(this).text(); 
       $.post('update_table.php', "id=" + id + "&" + name + "=" + value, function (data) { 
        if (data != '') 
        { 
         message_status.show(); 
         message_status.text(data); 
         //hide the message 
         setTimeout(function() { 
          message_status.hide() 
         }, 3000); 
        } 
       }); 


      })); 


     </script> 
    </head> 
    <body> 
     <table id="dataTable" width="700px" > 
      <thead> 
       <tr>  
        <th>Name</th> 
        <th>ID</th> 
       </tr> 
      </thead> 
      <tbody> 
      </tbody> 
     </table> 
    </body> 
</html> 
+0

вы пытались '$ (документ) .На («размытость»...' – caramba

+0

, к сожалению, я должен использовать «привязку» вместо «на», потому что из устаревшей версии jQuery, используемой этой страницей. – AbdulRahman

+0

ooh Я даже не рассматривал это раньше, вы включаете jQuery несколько раз. Это нехорошо! И для вашего несчастья у меня нет решения, тогда – caramba

ответ

0

попробовать

$(document).bind("td").blur(function() 
{ 
}); 
+0

не работает ни – AbdulRahman

-1

определение функции привязки выглядит следующим образом:

.bind(eventType [, eventData ], handler) 

так, вы должны сделать:

$('td').bind('blur', function(){ 
    //event handler statement goes here 
}); 

И как уже упоминалось @paul в комментариях выше, вы должны использовать live() Функция, поскольку вы создаете элементы td динамически.

$('td').live('blur', function(){ 
//event handler statement goes here 
}); 
+0

'.live()' устарел давным-давно: http://api.jquery.com/live/ И '.bind()' устарел. Вы должны использовать '.on()': http://api.jquery.com/on/ –

+0

это знаете. но, как упоминалось в комментариях к вопросу, версия jquery, используемая на странице, является устаревшей. –

+0

Я обновил код выше и удалил древнюю версию jQuery, к сожалению, используя on() или устаревшее bind() тоже не работает. – AbdulRahman

0

похоже, что таблица td не является стандартным элементом фокусировки, поэтому вы не можете ее размыть. попытаться добавить свойство tabsindex каждому тд

<td tabindex="1">focus on me</td> 
Смежные вопросы