JQuery UI Dialog запускается только на второй ссылке в карусели

Question

На моей странице есть карусель, которая отображает краткие описания продуктов в продаже (спец.). Когда пользователь щелкает элемент в карусели, должно открываться диалоговое окно пользовательского интерфейса с полным описанием продукта на основе href в элементе карусели.

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

Кто-нибудь может увидеть, что может быть причиной этого странного поведения?

РЕДАКТИРОВАТЬ Код для обработки диалогового окна пользовательского интерфейса включается в функцию $document.ready, если это имеет значение.

Вот карусель на странице:

<div id="scroller">
    <div class="slideshow">
      <ul>
      <cfloop query="qScrollers">
        <li>
        <cfset product = #qScrollers.isproduct#>
        <cfif product IS true>
            <cfset ref = "editProduct.cfm?pid=" & #qScrollers.link#>
        <cfelse>
            <cfset ref = "specials_backup.cfm?item=" & #qScrollers.link#>
        </cfif>
          <a class="specials" href="<cfoutput>#ref#</cfoutput>" title="<cfoutput>#qScrollers.title#</cfoutput>">
          <p><cfoutput>#qScrollers.line1#</cfoutput></p>
          <h1><cfoutput>#qScrollers.line2#</cfoutput></h1>
          <p><cfoutput>#qScrollers.line3#</cfoutput></p>
          <h2><cfoutput>#qScrollers.line4#</cfoutput></h2></a>
          </a>
        </li>
      </cfloop>
      </ul>
    </div>
  </div>

И скрипт для всплывающего пользовательского интерфейса:

$('.specials').click(function() {
    var $link = $(this);
    var $dims = $link.attr('name');
    var $dialog = $('<div></div>')
        .load($link.attr('href'))
        .dialog({
            autoOpen: false,
            modal: true,
            title: $link.attr('title'),
            width: 1024,
            height: 850
        });

    $dialog.dialog('open');
    return false;
    });

Answer 1

Очевидно, это была проблема времени. Я поместил код jQuery вне функции $(document).ready, и все работает как шарм.

Итак, вот исправление, как я его вижу. Если у кого-то есть лучшее решение, пожалуйста, прыгайте.

$(document).ready(function(){
//...all my other jQuery stuff here//
});

function createScroller(){
$('.specials').click(function() {
    var $link = $(this);
    //var $dims = $link.attr('name');
    var $dialog = $('<div></div>')
        .load($link.attr('href'))
        .dialog({
            autoOpen: false,
            modal: true,
            title: $link.attr('title'),
            width: 1024,
            height: 850
        });

    $dialog.dialog('open');
    return false;
    }); 
}

window.onload = createScroller;

Answer 2

переместить это

.dialog({
            autoOpen: false,
            modal: true,
            title: $link.attr('title'),
            width: 1024,
            height: 850
        })

в .load callback