JQuery + AJAX удалить якорь не работает - PullRequest
Новая
       10

JQuery + AJAX удалить якорь не работает

0 голосов
/ 26 мая 2009

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

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

Вот мой код:

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>

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

1 Ответ

1 голос
/ 26 мая 2009

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

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...