Question

我正在构建一个允许用户登录的网站，并使用jquery动态更新页面以显示当前所有用户。

我希望每个用户名旁边都有一个按钮，让其他用户选择该人（如果愿意，可以选择游戏匹配服务。）

目前我正在使用jquery和php组合生成名称。

Jquery做长轮询：

function waitForMsg(){
    $.ajax({
        url: "tictac_code1.php",
        type: 'POST',
        data: 'longpoll=1',

        async: true, /* If set to non-async, browser shows page as "Loading.."*/
        cache: false,
        timeout:10000, /* Timeout in ms */

        success: function(data){ /* called when request to barge.php completes */

            $('#loggedinnames').empty();
            $('#loggedinnames').append(data);
            setInterval(waitForMsg, 10000);
            //setTimeout(
            //    'waitForMsg()', /* Request next message */
            //    1000 /* ..after 1 seconds */
            //);

        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
            //alert("error in waitformsg.");
            addmsg("error", textStatus + " (" + errorThrown + ")");
            setInterval(waitForMsg, 10000);


            //setTimeout(
              //  'waitForMsg()', /* Try again after.. */
              //  "15000"); /* milliseconds (15seconds) */


        }
    });
};

$(document).ready(function(){
    waitForMsg(); /* Start the inital request */
});

PHP执行sql查询并将数据返回到要显示的jquery。

if (isset ($_POST['longpoll'])) {
if (filter_input(INPUT_POST,'longpoll') == '1') {
    $name = $_SESSION['name'];

    $result = mysql_query("select name from tictac_names where logged_on='1' AND name!='$name'", $db);

    $rowCheck = mysql_num_rows($result);
    if ($rowCheck > '0') {
        while ($row = mysql_fetch_assoc($result)){
            foreach ($row as $val){
                $spanid = 'sp_' . $val;
                $buttonid = 'b_' . $val;
               //echo "<br><span id=\"$spanid\">$val</span></br>";
                //<input type ="button" id="nameButton" value ="OK"/><br>
               echo "<br><span id=\"$spanid\">$val <input type =\"button\" id=\"$buttonid\" value =\"Button!\"/> </span></br>";
                //echo "<br><p><span id=\"$spanid\">$val</span>Click here to play a game with this player.</p></br>";
            }
        }
    } // end rowcheck 

}

} //////////// end of the LONGPOLL if

因此它成功地输出了名称和按钮，但按钮的ID不是唯一的。如果我希望它是可点击的，我确信该ID必须是唯一的，但是需要额外的jquery来捕获按钮点击。

我该如何使这项工作？我应该采取不同的方法，也许是带有单选按钮的名字，还有一个“匹配我们！”按钮吗

Answer 1

您可以删除按钮，并使用事件委派来确定用户点击的用户名。然后在点击处理程序中执行您需要执行的操作。

为此，请在#loggedinnames上设置点击处理程序，如下所示：

$('#loggedinnames').click(function(e) {
    if ($(e.target).is('span')) { //e.target is the element that was actually clicked.
        alert($(e.target).text());
    }
});

这种方法的优点是您只有一个点击处理程序，并且每次登录用户列表发生更改时都不需要绑定事件。

Answer 2

@Craig M回答的另一种方法是在jQuery中使用内置的委托功能。

$('#loggedinnames').delegate('span','click',function(){
    alert($(this).text());
});

它做同样的事情但你可以使用任何选择器，而不仅仅是标签名称，你不需要编写所有的锅炉板代用码。

Answer 3

在这种情况下我通常做的是在JavaScript中而不是在服务器上构建按钮。然后你可以保留一个用作计数器的全局变量，每次添加按钮时都会增加它，并使用它来组合你的唯一按钮ID。

我在很多情况下都使用过这种方法，90％的情况下，它每次都有效。

Answer 4

为所有按钮提供相同的class和唯一的id。使用live()为class在JQuery中编写一个事件处理程序，获取id this并在代码中使用它。这样代码适用于所有按钮（包括新按钮），您不必复制任何代码。

$('#loggedinnames .button').live('click', function() {
  someMethod($(this).attr('id')); //run your code here
});

生成按钮并使它们对jquery有用

4 个答案: