Конвертировать A в SELECT при событии клика с JQuery

Question

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

Пока у меня есть:

$("a.timeChange").click(function(e){
    e.preventDefault();
    $stamp = $(this).text();
    $.get("tstampoffsetter.php", { t: $stamp, a: 1 }, function(data){
        alert(data);
        $(this).replaceWith(data);
    });
});
$("#selectTimeStamp").change(function(){
    var i = $("#selectTimeStamp :selected").text();
    $(this).replaceWith("<a href='#'>" + i + "</a>");
});

HTML выглядит следующим образом:

<a href='#' class='timeChange'>Mon, 13 Sep 2010 04:20:45 -0700</a>

Данные, возвращаемые вызовом AJAX:

<select id="selectTimeStamp">
   <option value='1284445245'>Mon, 13 Sep 2010 23:20:45 +1200</option>
   <option value='1284441645'>Mon, 13 Sep 2010 22:20:45 +1100</option>
   <option value='1284438045'>Mon, 13 Sep 2010 21:20:45 +1000</option>
   <option value='1284434445'>Mon, 13 Sep 2010 20:20:45 +0900</option>
   <option value='1284430845'>Mon, 13 Sep 2010 19:20:45 +0800</option>
   <option value='1284427245'>Mon, 13 Sep 2010 18:20:45 +0700</option>
   <option value='1284423645'>Mon, 13 Sep 2010 17:20:45 +0600</option>
   <option value='1284420045'>Mon, 13 Sep 2010 16:20:45 +0500</option>
   <option value='1284416445'>Mon, 13 Sep 2010 15:20:45 +0400</option>
   <option value='1284412845'>Mon, 13 Sep 2010 14:20:45 +0300</option>
   <option value='1284409245'>Mon, 13 Sep 2010 13:20:45 +0200</option>
   <option value='1284405645'>Mon, 13 Sep 2010 12:20:45 +0100</option>
   <option value='1284402045'>Mon, 13 Sep 2010 11:20:45 +0000</option>
   <option value='1284398445'>Mon, 13 Sep 2010 10:20:45 -0100</option>
   <option value='1284394845'>Mon, 13 Sep 2010 09:20:45 -0200</option>
   <option value='1284391245'>Mon, 13 Sep 2010 08:20:45 -0300</option>
   <option value='1284387645'>Mon, 13 Sep 2010 07:20:45 -0400</option>
   <option value='1284384045'>Mon, 13 Sep 2010 06:20:45 -0500</option>
   <option value='1284380445'>Mon, 13 Sep 2010 05:20:45 -0600</option>
   <option SELECTED value='1284376845'>Mon, 13 Sep 2010 04:20:45 -0700</option>
   <option value='1284373245'>Mon, 13 Sep 2010 03:20:45 -0800</option>
   <option value='1284369645'>Mon, 13 Sep 2010 02:20:45 -0900</option>
   <option value='1284366045'>Mon, 13 Sep 2010 01:20:45 -1000</option>
   <option value='1284362445'>Mon, 13 Sep 2010 00:20:45 -1100</option>
</select>

При нажатии на ссылку я не получаю сообщение об ошибке, но ссылка не становится выпадающим. Я вижу запрос GET через FireBug, и он возвращает данные, статус 200 в порядке 44 мс. После того как я окну окно оповещения, я не вижу изменений и ошибок. Спасибо за любую помощь или совет, который вы могли бы предоставить.

Answer 1

Вы можете использовать метод live, чтобы события также были присоединены к элементам, которые еще не существуют:

$("a.timeChange").live('click', function(e){
    e.preventDefault();
    var $link = $(this)
    $.get("tstampoffsetter.php", { t: $link.text(), a: 1 }, function(data){
        alert(data);
        $link.replaceWith(data);
    });
});
$("#selectTimeStamp").live('change', function(){
    var text = $("#selectTimeStamp :selected").text();
    $(this).replaceWith('<a href="#">' + text + '</a>');
});

Answer 2

Поскольку this не ссылается на ссылку в обратном вызове $.get() успеха (это относится к объекту jQuery ajax), вам нужно сохранить ссылку на выбранный вами якорь, как это:

$("a.timeChange").live("click", function(e){
    e.preventDefault();
    var link = $(this), $stamp = link.text();
    $.get("tstampoffsetter.php", { t: $stamp, a: 1 }, function(data){
       link.replaceWith(data);
    });
});
$("#selectTimeStamp").live("change", function(){
    var i = $("#selectTimeStamp :selected").text();
    $(this).replaceWith("<a href='#' class='timeChange'>" + i + "</a>");
});

Изменение this решает первую проблему, согласно вашему комментарию, вторая привязка к вновь созданным элементам, вам нужно будет использовать .live(), и при повторном создании ссылки убедитесь, что она имеет класс timeChange (поэтому селектор .live() соответствует).