2009-05-26 31 views
-1

こんにちは私はjQueryとCodeigniterを使用しています。私はajaxを使用して削除エントリを追加できる簡単なToDoリストを作成しています。jQuery + AJAX deleteアンカーが機能しない

問題は、削除アンカーをクリックするたびにエントリを削除しないことです。エントリ機能を追加するとBTWが機能します。

は、ここに私のコードです:

<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> 

todo_view.php 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

どのようにそれが動作しません。あなたはhttp://plugins.jquery.com/project/livequery

乾杯、 微視的^地球人からそれをつかむことができますか? jQuery does not work、またはサーバー側にエラーがありますか? –

+0

エントリは削除されず、#containerパーツは更新されません。私は確信していませんが、私はjQueryが動作していないものだと思っています(私はそれが何であるか、理由を知りたがっています) – alimango

答えて

1

まず、GET/POSTヘッダーと値を追跡するには、Firebug(Firefoxの拡張機能)を使用する必要があります。本当にあなたの人生はajaxの呼び出しと応答をデバッグするという面で簡単です。

次のようになります(おそらく、alimangoに言及している通りです)...主な原因は、メインページのDOMが既に読み込まれた後にメッセージリストが読み込まれることです。 jQueryはclickイベントを後で追加された要素に自動的にバインドしません。クリックリストバインディングルーチンは、メッセージリストがDOMに追加された後に呼び出される必要があります。これは常に可能なわけではありません...リストが動的にフェッチ/変更されているためです。

一つの解決策は、jQueryの1.3以降に導入されたlive()バインドイベント機能を使用することです。これは、のすべての現在および将来の対応要素のハンドラをイベント(クリックなど)にバインドするのに役立ちます。カスタムイベントをバインドすることもできます。ページがされた後でも、イベントを結合または自動魔法のようにマッチした要素のためのコールバックを焼成してjQueryのセレクタの力を利用し、」jQueryプラグイン - フォアの詳細情報は、LiveQueryhttp://docs.jquery.com/Events/live#typefn

第二の溶液を使用することです参照しますロードされ、DOMが更新されました。

+0

うわー、すばらしい答えです。 – jfar

+0

私はjqで私の初期の間にかなり多くのことに直面しました。そのような場合、Firebugでさえ、あなたには何も言わないでしょう! –

関連する問題