Question

我一直在制作类似9gag的页面。我试图整合一个由另一个人制作的投票系统，因为我不是很熟悉AJAX请求，而且它只是不想工作。

我的index.php从mySQL数据库加载了5个帖子，然后将它们附加到主div。向下滚动后，它会再添加五个等等。这是通过一个AJAX请求来完成的，它就像一个魅力。

当我通过AJAX将它附加到div时，我还在div中附加了一些变量，因此我可以将它用于另一个AJAX请求，这就是问题发生的地方。它只是不做任何AJAX请求。经过一个小时的调试后，我开始质疑是否可以将一些数据附加到div中，而原始的index.php中不存在该数据，然后用它运行AJAX请求。

我不会在这里发布pagination.js和它的东西，因为它有效，我只会发布ajax.php请求，它可能会出错：

    <?php
    include 'config/connection.php';
    $db = "test";
    $table = "posts";

    $offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();
    $postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();

    $run = mysqli_query($con,"SELECT * FROM $db.$table ORDER BY id DESC LIMIT ".$postnumbers." OFFSET ".$offset);

    while($row = mysqli_fetch_array($run)) {
    echo "      <article>\n";
    echo "          <div id='title'><h1>".utf8_encode($row['title'])."</h1></div>\n";
    echo "          <div id='image'><img src='posts/".$row['dDate']."/".$row['image']."'></div>\n";
    echo "          <div id='text' class='item' data-postid='".$row['id']."' data-score='".$row['vote']."'>\n";
    echo "              <p>Beküldte: ".$row['postedBy']."\n";
    echo "              <div class='vote-span'><!-- voting-->\n";
    echo "                  <div class='vote' data-action='up' title='Vote up'>\n";
    echo "                      <i class='icon-chevron-up'></i>\n";
    echo "                  </div><!--vote up-->\n";
    echo "                  <div class='vote-score'>".$row['vote']."</div>\n";
    echo "                  <div class='vote' data-action='down' title='Vote down'>\n";
    echo "                      <i class='icon-chevron-down'></i>\n";
    echo "                  </div><!--vote down-->\n";
    echo "              </div>\n";
    echo "          </div>\n";
    echo "      </article>\n";
    }
    ?>

输出如下：

    <article>
        <div id='title'><h1>Azért azt mondtam már hogy héjhó halihó, de igazából yolo, mert nem is igaz az, hogy ez tök gáz lenne.</h1></div>
        <div id='image'><img src='posts/2014-08-23/Screen Shot 2014-06-29 at 1.00.45 PM.png'></div>
        <div id='text' class='item' data-postid='52' data-score='0'>
            <p>Beküldte: zsombor
            <div class='vote-span'><!-- voting-->
                <div class='vote' data-action='up' title='Vote up'>
                    <i class='icon-chevron-up'></i>
                </div><!--vote up-->
                <div class='vote-score'>0</div>
                <div class='vote' data-action='down' title='Vote down'>
                    <i class='icon-chevron-down'></i>
                </div><!--vote down-->
            </div>
        </div>
    </article>

但是，当我检查资源时，它不在index.php中（当然），而只在ajax.php文件中，该文件附加到index.php。

这是votingsys.js文件：

$(document).ready(function(){
// ajax setup
$.ajaxSetup({
    url: '../vote.php',
    type: 'POST',
    cache: 'false'
});

// any voting button (up/down) clicked event
$('.vote').click(function(){
    var self = $(this); // cache $this
    var action = self.data('action'); // grab action data up/down 
    var parent = self.parent().parent(); // grab grand parent .item
    var postid = parent.data('postid'); // grab post id from data-postid
    var score = parent.data('score'); // grab score form data-score

    // only works where is no disabled class
    if (!parent.hasClass('.disabled')) {
        // vote up action
        if (action == 'up') {
            // increase vote score and color to orange
            parent.find('.vote-score').html(++score).css({'color':'orange'});
            // change vote up button color to orange
            self.css({'color':'orange'});
            // send ajax request with post id & action
            $.ajax({data: {'postid' : postid, 'action' : 'up'}});
        }
        // voting down action
        else if (action == 'down'){
            // decrease vote score and color to red
            parent.find('.vote-score').html(--score).css({'color':'red'});
            // change vote up button color to red
            self.css({'color':'red'});
            // send ajax request
            $.ajax({data: {'postid' : postid, 'action' : 'down'}});
        };
        // add disabled class with .item
        parent.addClass('.disabled');
    };
});
});

aaaand vote.php文件：

    include('config/connection.php');
    # start new session
    session_start();

if ($_SERVER['HTTP_X_REQUESTED_WITH']) {
if (isset($_POST['postid']) AND isset($_POST['action'])) {
    $postId = (int) mysql_real_escape_string($_POST['postid']);
    # check if already voted, if found voted then return
    if (isset($_SESSION['vote'][$postId])) return;
    # connect mysql db
    dbConnect();

    # query into db table to know current voting score 
    $query = mysql_query("
        SELECT vote
        from posts
        WHERE id = '{$postId}' 
        LIMIT 1" );

    # increase or dicrease voting score
    if ($data = mysql_fetch_array($query)) {
        if ($_POST['action'] === 'up'){
            $vote = ++$data['vote'];
        } else {
            $vote = --$data['vote'];
        }
        # update new voting score
        mysql_query("
            UPDATE posts
            SET vote = '{$vote}'
            WHERE id = '{$postId}' ");

        # set session with post id as true
        $_SESSION['vote'][$postId] = true;
        # close db connection
        dbConnect(false);
    }
}
}
?>

那么可以使用这样的另一个AJAX请求，还是我做错了什么？

我正在使用jQuery 1.4.3。

Answer 1

啊哈，我打赌我知道问题所在。你有五个初始div，它们通过以下方式附加了点击事件处理程序：

$('.vote').click(function(){ ... });

但是，您通过无限滚动设备添加新div，并且这些设备没有附加事件。这是正确的行为，因为您没有重新运行代码以再次附加它们。

jQuery中有一个聪明的设备可以帮助你解决这个问题。它允许您将事件附加到现在和将来的事物中。要使用它，请尝试：

$('container-selector').on('click', '.vote', function() { ... });

带有'click'参数的on方法只是在jQuery中附加事件的新首选方式，如果将处理程序作为第二个参数添加，它将与现在一样。但是，如果添加新参数'.vote'，它会将事件附加到与内部整个容器选择器匹配的任何内容，即使在附加事件时它不存在。

您可以在此处使用'body'作为容器选择器，但出于性能原因，最好更具体一点。只需使用任何CSS选择器将包含您希望附加此特定事件处理程序的所有div。

两个ajax请求在一个不存在的附加div中

1 个答案: