2009-05-26 3 views
-1

Привет Я использую jQuery и Codeigniter. Я создаю простой список дел, который может добавлять записи удалений с помощью ajax.jQuery + AJAX delete anchor не работает

Проблема заключается в том, что всякий раз, когда я нажимаю на свой анкер удаления, он не удаляет запись. Добавление функции записи работает BTW.

Вот мой код:

todo_view.php

<html> 
    <head>Todo List</head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#submit').click(function() { 

       var msg = $('#message').val(); 

       $.post("<?= site_url('todo/add') ?>", {message: msg}, function() { 
        $('#content').load("<?= site_url('todo/view/ajax') ?>"); 
        $('#message').val(''); 
       }); 
      }); 

      $('a.delete').click(function() { 
       var id = $('input', this).val(); 
       $.post("<?= site_url('todo/delete') ?>", {todoid: id}, function() { 
        $('#content').load("<?= site_url('todo/view/ajax') ?>"); 
       }); 
      }); 

     }); 
    </script> 
    <body> 
     <div id="form"> 
      <input type="text" name="message" id="message" /> 
      <input type="submit" name="submit" id="submit" value="Add todo" /> 
     </div> 
     <div id="content"> 
      <?php $this->load->view('message_list'); ?> 
     </div> 
    </body> 
</html> 

message_list.php

<ol> 
    <?php foreach ($todolist as $todo): ?> 
     <li> 
     <?php echo $todo->todo; ?> 
     <a href="#" class="delete"><input type="hidden" value="<?=$todo->todoid ?>" />delete</a></li> 
    <?php endforeach; ?> 
</ol> 

Почему не работает?

+0

Каким образом это не работает? JQuery не работает, или есть ошибка на стороне сервера, или ...? –

+0

Запись не будет удалена, а часть #container не будет обновляться. Я не уверен, но я думаю, что jQuery - это тот, который не работает (я хочу знать, есть ли это и почему) – alimango

ответ

1

Прежде всего, чтобы отслеживать заголовки и значения GET/POST, вы должны начать использовать Firebug (расширение для Firefox). На самом деле ваша жизнь упрощает процедуру отладки вызовов и ответов ajax.

Далее (несколько в строках того, что упоминалось в алиманго) ... наиболее вероятной причиной является то, что список сообщений загружается ПОСЛЕ ТОГО, как DOM вашей главной страницы уже загружен. jQuery не будет автоматически привязывать событие click к элементам, добавленным позже. Процедура привязки к кликам должна быть вызвана ПОСЛЕ того, как список сообщений был добавлен в DOM. Теперь это не всегда возможно ... поскольку ваш список выбирается/изменяется динамически.

Одно из решений состоит в использовании функции событий live() связывания, который был введен с JQuery 1.3. Это помогает привязывать обработчик к событию (например, щелчок) для все текущие - и будущие - согласованный элемент. Может также связывать пользовательские события. Fore больше информации см http://docs.jquery.com/Events/live#typefn

Второе решение заключается в использовании, LiveQuery - это плагин JQuery, который «использует силу JQuery селекторы путем связывания событий или стрельбы обратные вызовы для соответствующих элементов авто-магически, даже после того, как страница была загружен и обновлен DOM ». Вы можете получить его от http://plugins.jquery.com/project/livequery

Приветствия, Микроскопические^землянина

+0

Ничего себе, отличный ответ, никогда не думал о проблемах DOM. – jfar

+0

Я столкнулся с этим очень много в свои ранние дни с jq. Если бы это было тяжелое время, подумайте: D В таких случаях даже Firebug не скажет вам, ПОЧЕМУ! –

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