Ответ Jquery Ajax с использованием ThickBox

Question

Итак, у меня есть ajax-вызов службы (использующей JQuery), которая возвращает действительный html:

<table class='datagrid' style='width: 600px; text-align:left'>
<tr><th>User</th><th>Full Name</th><th>Company</th><th>New Prints</th><th>Reprints</th></tr><tr>
<td>
<a class='thickbox' href='UserSessionReportPopup.aspx?user=1&start=9/2/2009&end=9/30/2009&TB_iframe=true&height=450&width=700'>carbon</a>

</td><td>Carbon County</td>
<td></td>
<td>5</td>
<td>4</td>
</tr>
</table>

Этот HTML-код возврата назначается правильно и отображается на странице, НО, когда я нажимаю "!", "&"; пометка новая страница открывается вместо " ThickBox " с содержанием iFrame.

Вот запутанная часть, если я скопирую этот код на страницу, а затем запустите его в браузере, он будет работать правильно (отображая элемент Thickbox)

Почему в ответе AJAX неправильно отображается элемент ThickBox?

Я предполагаю, что class = 'Thickbox' в тексте ответа не находит javascript, который знает, как анализировать этот элемент.

Answer 1

Думаю, проблема в том, что у этого <a class='thickbox' просто нет события, связанного с ним.

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

Так что просто сделайте ваш звоночек в этом новом элементе тоже. Не используйте тот же код, который вы используете в $ (document) .ready. Когда я сделал что-то подобное, события начали работать с новыми элементами, но дважды сработали над старыми элементами.

Изменить в ответ на комментарий: Я понятия не имею, как работает Thickbox. Я всегда предпочитал Slimbox. Я нашел какой-то пример, который мог бы вам помочь. ПРОЧИТАЙТЕ это (о толстом ящике): http://15daysofjquery.com/jquery-lightbox/19/

Обычно, когда страница загружается, эта функция срабатывает:

function TB_init(){

    $("a.thickbox").click(function(){

    var t = this.title || this.innerHTML || this.href;

    TB_show(t,this.href);

    this.blur();

    return false;

    });

теперь все теги с классом Thickbox будут открывать ссылку на материал в окне Thickbox. Если на страницу добавляются новые элементы, с ними не связывают это событие, поэтому после выполнения магии ajax и извлечения нового содержимого из какого-либо места необходимо связать этот $ (& Quot; a.thickbox). "). click (function () {для новой ссылки на., поэтому просто добавьте что-то вроде

$(newlinkselector).click(function{ etc.. etc.. 

в сценарии, сразу после того места, где вы рендерите материал, который возвращает вызов ajax.

Answer 2

Вы также можете поместить следующий скрипт в ответ ajax:

<script type="text/javascript">
    self.parent.tb_init('a.thickbox, area.thickbox, input.thickbox');
</script>

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

Answer 3

У меня была такая же проблема. Быстрый ответ - добавьте следующую строку после заполнения innerHTML: tb_init ( 'a.thickbox'); // Инициализировать снова

Это повторно инициализирует обработчик события для тега привязки. Работал как шарм для меня ...

Answer 4

Замените tb_init () следующим:

   function tb_init(domChunk){
    $(domChunk).live("click", function(){
    var t = this.title || this.name || null;
    var a = this.href || this.alt;
    var g = this.rel || false;
    tb_show(t,a,g);
    this.blur();
    return false;
    });
}

Это связывает событие click с методом jQuery live, который рассматривает динамически генерируемый контент.