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

如何解决生成的按钮并使它们对jquery有用

| 我正在建立一个允许用户登录的网站，并使用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来捕获按钮单击。我该如何工作？我是否应该采用其他方法，例如带有单选按钮的名称和一个“匹配我们！”按钮？

解决方法

@Craig M \的答案的替代方法是使用jQuery中的内置委托功能。

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

它具有相同的作用，但是您可以使用任何选择器，而不仅是标签名，而且您不需要编写所有样板委托代码。 , 您可以删除按钮，然后使用事件委托来确定用户单击的用户名。然后在点击处理程序中执行您需要做的事情。为此，请在#loggedinnames上设置点击处理程序，如下所示：

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

这种方法的优点是您只有一个单击处理程序，并且不需要在每次登录用户列表更改时都绑定事件。 , 在这种情况下，我通常要做的是在JavaScript中而不是在服务器上构建按钮。然后，您可以只保留一个用作计数器的全局变量，每次添加按钮时将其递增，然后使用该变量来组合唯一的按钮ID。我在很多情况下都使用了这种方法，并且90％的时间每次都有效。 , 给所有按钮相同的class和唯一的id。在JQuery中使用ѭ6代表event4ѭ编写事件处理程序，从中获得ѭ9的ѭ5并在代码中使用它。这样，代码可用于所有按钮（包括新按钮），而您不必重复任何代码。

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