.on () Селектор jquery не срабатывает! Ссылка включена

0

Большое спасибо за чтение, надеюсь, у кого-то есть предложение.

Пожалуйста, посмотрите сайт http://epal-rodop.ser.sch.gr/demo/index.html. Он использует HTML-панель из Adobe/Spry для выполнения простого запроса страницы ajax.
Например, когда вы нажимаете ссылку меню (справа) ----------

Изменить (извините, меню слева)

он приносит страницу, которую вы запрашиваете через ajax, и заполняет контейнер div. Страница содержит панель вкладок SPRY (javascript) и работает нормально.
Я пытаюсь обнаружить событие click на вкладке вкладки (нажатие на вкладке приведет к появлению окна предупреждения) (нажмите ссылку TEST)
У меня есть следующий код (JQuery и SPRY):

$(document).ready(function(){
    $(document).on("click","#TabbedPanels1",function (event){
        alert("in");
    });
});

и на странице, которая проходит через ajax в div, я имею следующий код

<div id="TabbedPanels1" class="TabbedPanels" style="margin-left:20px; ">

  <ul  class="TabbedPanelsTabGroup" >
    <li class="TabbedPanelsTab" tabindex="0">Test</li>
    <li class="TabbedPanelsTab" tabindex="0">test2</li>
  </ul>

  <div class="TabbedPanelsContentGroup" style="height: auto" >
    <div class="TabbedPanelsContent">
      <p style="font-size:13px; text-align:justify">Data</p>
    </div>
    <div class="TabbedPanelsContent">
      <p><span style="font-size:13px; text-align:justify">Data </span></p>  
    </div>
  </div>
</div>

.on() работает, если вы нажмете NEXT на пространство с .on() и в поле BETWEEN на пространстве панелей (расстояние 2px!), Но не на заголовок панели, хотя селектор содержит ul и li, где существуют фактические названия панелей. Я попробовал несколько комбинаций (давая идентификаторы li, ul и т.д., Но никто не работает).

Большое спасибо за любые идеи, которые могут помочь решить проблему.

Теги:
spry

2 ответа

2
Лучший ответ

Ваш скрипт работает правильно. Проблема в том, что, как написано, предупреждение будет запущено только в том случае, если вы нажмете в фактическом div. Попробуйте, вы увидите, что он работает. Нажмите в белом пространстве рядом с вкладками, и вы увидите предупреждение.

То, что вам действительно нужно сделать, - установить функцию щелчка для .TabbedPanelsTab класса .TabbedPanelsTab, так как это срабатывает, когда пользователь нажимает на фактические вкладки.

$(document).on("click",".TabbedPanelsTab",function (event){
    alert("in");
});

Кроме того, я бы предложил использовать виджет tabs который уже существует в пользовательском интерфейсе jquery, вместо того, чтобы сворачивать свой собственный.

Поделиться
  • 0
    На самом деле, при дальнейшем рассмотрении, я думаю, что реальная проблема заключается в том, что библиотека SpryTabbedPanels, которую вы используете для вкладок, предотвращает срабатывание события click из-за этой строки в функции onTabClicked: return this.cancelEvent(e);
  • 0
    Большое спасибо за ответ, Скотт. Я упомянул в вопросе, что вы можете нажать рядом с вкладкой и иметь рабочее окно с предупреждением, и я проверил селекторы классов (безрезультатно). Я очень заинтересован в вашей разработке в cancelEvent (e). У вас есть предложение о том, как побороть?
Показать ещё 1 комментарий
1

Чтобы расширить ответ scott.korin (который действителен), вы также можете улучшить эффективность этого скрипта (при условии, что ваш элемент # TabbedPanels1 всегда присутствует:

$('#TabbedPanels1').on("click",".TabbedPanelsTab",function (event){
    alert("in");
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню