为什么单击一个按钮会影响jQuery Ajax中的所有按钮

时间:2016-02-10 12:03:30

标签: javascript php jquery ajax

我想点击一个影响(向我们的API发布内容)其特定ID的按钮。但是,当我点击它时,页面的整个按钮会将数据发送到我们的API。 Here is the little snapshot of my page。你可以看到所有行都有唯一的id,但是当我点击行中的相对投票按钮时,它会对所有行进行投票。

我的jQuery和Ajax代码在这里

在First.php中的jQuery

            public function getButtons() {
            $ids = $this->polls_id;
            echo $this->polls_id;

            echo "<html>";
            echo "<head>";
            echo '<meta charset="utf-8">';
            echo '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>';
            echo '<script type="text/javascript"></script>';
            echo '<script type="text/javascript">';
                echo '$(function(){';
                    echo "$('body').on('click', 'button', function(event){";
                        echo "event.preventDefault();";
                        echo "var pollss_id = $('#" .  $ids . "').text();";
                        echo "$.ajax({";
                            echo "method: 'POST',";
                            echo "url: 'ajax.php',";
                            echo "data: {'pollss_id' : pollss_id}";
                        echo "})";
                    echo "});";
                echo "});";
                echo "</script>";
            echo "</head>";
            echo "<body>";
                echo '<div id='. $ids .'>' . $ids . '</div>';
                echo '<button type="button">Vote</button>';
            echo "</body>";
            echo "</html>";

Ajax.php

    <?php
session_start();
$user_id = $_SESSION['user_id'];

if($_POST) {
    $polls_id = $_POST['pollss_id'];
}

function vote_poll1($user_id, $polls_id){
    $postdata = http_build_query(
                                array(
                                    'user_id' => $user_id,
                                    'poll_id' => $polls_id,
                                    'vote_value' => '1'
                                     )
                                );
    $opts = array(
                'http' => array(
                'method'  => 'POST',
                'header'  => 'Content-type: application/x-www-form-urlencoded',
                'content' => $postdata
                                )
                 );
    $context  = stream_context_create($opts);
    $result = file_get_contents('http://sitename.herokuapp.com/api/v1/polls/'. $polls_id . '/castvote', false, $context);
}

echo vote_poll1($user_id, $polls_id);

PS:我用for循环创建对象和调用函数(图片,文本字段,按钮)。对此可能有什么问题?

2 个答案:

答案 0 :(得分:1)

您现在的方式是在每个按钮上注册点击事件。

所以代码

$('#" .  $ids . "').text();

将在任何按钮点击时运行。

您可以做的是添加该功能一次,并将pollid作为数据属性添加到按钮本身

<button data-poll-id="5" type="button">Vote</button>

然后在你的函数上你可以用jQuery的数据函数获取id

var poll_id = $(this).data("poll-id")

并立即拨打你的ajax电话

答案 1 :(得分:0)

因为您的选择器会选择所有非特定按钮。

 echo "$('body').on('click', 'button', function(event){";

您应该使用class(。)或id(#)前缀。