2010-09-30 13 views
0

Использование JQuery и все еще немного нового в нем, попытка изменить ссылку на выпадающее меню, которую пользователь может выбрать, и после выбора выбора он возвращает к гиперссылке с текстом выделения.Преобразование A в SELECT при событии Click с помощью 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, и он возвращает данные, Status 200 OK 44ms. После того, как я ОК в окне «Предупреждение», я не вижу никаких изменений и ошибок. Спасибо за любую помощь или совет, которые вы могли бы предоставить.

ответ

0

Это потому, что this не относится к ссылке в успех обратного вызова $.get() (это относится к объекту Ajax JQuery), вам нужно сохранить ссылку на якорь вы щелкнули, как это:

$("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() соответствует).

+0

Спасибо Ник! Это фиксировало эту первую функцию. Моя вторая функция не применяется к новому объекту SELECT. Нужно ли прикладывать это после замены? – Twisty

+0

@Twisty - О, используйте '.live()' для этого, например. '$ (" # selectTimeStamp "). live (" change ", function() {' для select, '$ (" a.timeChange "). live (" click ", function (e) {' для привязки, –

+0

Спасибо! Идеальное решение для этого. Guffa побьет вас, все работает так, как я хотел. – Twisty

0

Вы можете использовать метод 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>'); 
}); 
+0

Guffa! Ты и Ник потрясли его! Спасибо, используя .live() отлично работает для функций, которые будут прикрепляться к новому Select Object. – Twisty

Смежные вопросы