Ответ 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-код назначается правильно и отображается на странице, НО, когда я щелкаю тег "a", открывается новая страница вместо "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 и извлечения нового содержимого из какого-либо места вам необходимо связать этот $("a.thickbox"). (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

Замените 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, который рассматривает динамически генерируемый контент.

Answer 4

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

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