Question

您好我正在使用jQuery和Codeigniter。我正在创建一个简单的待办事项列表，可以使用ajax添加删除条目。

问题是每当我点击我的删除锚点时，它都不会删除该条目。添加条目功能可以使用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>

为什么不起作用？

Answer 1

首先 - 要跟踪GET / POST标头和值，您应该开始使用 Firebug （Firefox的扩展程序）。真的让你的生活变得容易调试ajax调用和响应。

接下来（有点像alimango提到的那样）......最可能的原因是在主页的DOM已经加载之后加载了消息列表。 jQuery不会自动将click事件绑定到稍后添加的元素。在将消息列表添加到DOM之后，必须调用您的单击绑定例程。现在这并不总是可行的......因为您的列表是动态获取/更改的。

一种解决方案是使用自 jQuery 1.3 以来引入的 live() 绑定事件函数。这有助于将处理程序绑定到所有当前 - 和将来 - 匹配元素的事件（如点击）。也可以绑定自定义事件。有关详情，请参阅http://docs.jquery.com/Events/live#typefn

第二个解决方案是使用 LiveQuery - 一个jQuery插件，它通过绑定事件或自动神奇地触发匹配元素的回调来利用jQuery选择器的强大功能，甚至在页面之后已加载并更新了DOM。“您可以从http://plugins.jquery.com/project/livequery

抓取它

干杯，微观^世人

jQuery + AJAX删除锚不起作用

1 个答案: