сгенерированные кнопки и их использование для jQuery

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 

Таким образом, он успешно выдает имя и кнопку, но идентификатор кнопки не уникален. Если я хочу, чтобы он был кликабельным, я уверен, что идентификатор должен быть уникальным, но тогда вам нужно будет добавить дополнительный jquery, чтобы поймать кнопку.

Как это сделать? Должен ли я использовать другой подход, возможно, имена с переключателями и один «Матч нас!». кнопка?

Answer 1

Альтернативой ответом @Craig M является использование встроенных функций делегата в jQuery.

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

Он делает то же самое, но вы можете использовать любой селектор не только имя тега, и вам не нужно кодировать весь код делегации котла пластины.

Answer 2

Вы можете удалить кнопки и использовать делегирование событий, чтобы выяснить, с каким именем пользователя нажимали. Затем сделайте то, что вам нужно сделать с ним в обработчике кликов.

Чтобы сделать это, установите обработчик щелчка на #loggedinnames так:

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

Преимущество этого подхода состоит в том, что у вас есть только один обработчик щелчка и не нужно, чтобы связать событие каждый раз, список зарегистрированных пользователей.

Answer 3

Что я обычно делаю в этой ситуации, это создать кнопку в JavaScript, а не на сервере. Затем вы можете просто сохранить глобальную переменную, которая служит в качестве счетчика, увеличивать ее каждый раз, когда вы добавляете кнопку, и использовать ее для объединения уникального идентификатора кнопки.

Я использовал этот подход во многих ситуациях, и в 90% случаев он работает каждый раз.

Answer 4

Дайте все свои кнопки тем же class и уникальным id s. Напишите обработчик событий в JQuery, используя live() для вашего class, где вы получите id из this и используйте его в своем коде. Таким образом, код работает для ВСЕХ кнопок (включая новые), и вам не нужно дублировать код.

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