Question

去年我只使用php / mysql创建了一个简单的待办事项列表。我现在想添加jquery / ajax以使其更加用户友好（主要是为了在添加或删除任务时摆脱页面刷新）。

添加任务的脚本运行正常，我使用

从数据库加载任务

$("#loadtaken").load("loadTaak.php");

loadTaak.php包含以下代码：

session_start();
include_once 'db.php';
include_once 'setup.php';

$q = "SELECT * FROM todo WHERE user = '$user[uid]' AND done = false ORDER BY created DESC";
            $r = mysqli_query($dbc, $q);
            if (mysqli_num_rows($r) > 0) { ?>

            <ul class="items">
                <?php while ($items = mysqli_fetch_assoc($r)) { ?>


                <li><span class="item"><?php echo $items['name']; ?></span>
                <button id="<?php echo $items['todo_id']; ?>" class="done-button">Taak volbracht</button></li>
                <?php }
                ?>
            </ul>  <?php } 
             else {
                        echo "U hebt nog geen taken toegevoegd.";
                    }

我希望我能掌握任务的id属性，将其标记为在数据库中完成，但这似乎不起作用。我尝试了以下方法：

$(".done-button").click(function(){


  var id =  $(this).attr("id");
    alert(id);

});

唉，电脑说没有:-(。

Answer 1

您必须重新启动javascript（加载ajax内容后）或从ajax内容加载。像这样的东西，

session_start();
include_once 'db.php';
include_once 'setup.php';

$q = "SELECT * FROM todo WHERE user = '$user[uid]' AND done = false ORDER BY created DESC";
        $r = mysqli_query($dbc, $q);
        if (mysqli_num_rows($r) > 0) { ?>

        <ul class="items">
            <?php while ($items = mysqli_fetch_assoc($r)) { ?>


            <li><span class="item"><?php echo $items['name']; ?></span>
            <button id="<?php echo $items['todo_id']; ?>" class="done-button">Taak volbracht</button></li>
<script>
$(".done-button").click(function(){

var id =  $(this).attr("data-id");
   alert(id);

});

Answer 2

很难从代码片段中确定，但我认为问题是你在实际退出之前绑定了“完成”按钮的“点击”事件。事件处理代码在页面加载时运行（通常，这是我们在代码中看不到的），并将事件附加到它找到的与类名匹配的任何元素。由于您尚未加载这些元素（通过ajax），因此无法将事件处理程序附加到它们。

解决此问题的一种方法是使用委托事件，将事件处理程序附加到DOM上方的元素（可以是document，但最好是最接近的父元素，当它出现时页面加载），并指定一个选择器来委托事件。每当处理程序被触发时，它将动态地查找具有该选择器的事件，使其能够找到创建处理程序时不存在的元素：

$("#loadtaken").on("click", ".done-button", function(){
  var id =  $(this).attr("id");
    alert(id);
});

有关详细信息，请参阅“直接和委派活动”部分下的http://api.jquery.com/on/。

Answer 3

我不知道这是不是很好的做法，但我把它的工作原理放在loadTaak.php文件而不是todo-list页面本身。

jquery：检索通过ajax加载函数生成的内容的attr（＆＃39; id＆＃39;）

3 个答案: