Проблема выбора программно сгенерированных кнопок с помощью JQuery - PullRequest
Новая
       11

Проблема выбора программно сгенерированных кнопок с помощью JQuery

0 голосов
/ 08 марта 2012

У меня возникли проблемы с тем, чтобы селекторы JQuery работали с некоторыми программно сгенерированными div

Я использую таблицу визуализации Google , чтобы отобразить некоторые результаты запроса с 20 результатами на страницу. Когда запрос возвращает более 20 результатов (и только если их более 20), кнопки подкачки появляются внизу панели результатов поиска. 

<div class="google-visualization-table-div-page">
  <div class="a-b-c a-d-e a-d-e-j a-d-e-o-p" title="" aria-disabled="true"
  role="button" style="-moz-user-select: none;">
    <div class="a-b-c a-d-e-f-g">
      <div class="a-b-c a-d-e-h-g">&lt;&lt;</div>
    </div>
  </div>
<div class="a-b-c a-d-e a-d-e-o-q" title="" role="button" 
style="-moz-user-select: none;" tabindex="0">
  <div class="a-b-c a-d-e-f-g">
    <div class="a-b-c a-d-e-h-g">&gt;&gt;</div>
  </div>
</div>
</div>
</div>

Моя цель - добавить те же кнопки подкачки в верхнюю часть панели. К сожалению, копирование и вставка этих элементов над панелью результатов не сработало, поэтому я планировал использовать событие нажатия jquery, чтобы кнопки копирования / вставки вверху программно нажимали кнопки внизу.

Мои кнопки точно такие же, как и в приведенных выше элементах div, только с добавлением идентификаторов. 

<div id="top_prev" class="a-b-c a-d-e a-d-e-j a-d-e-o-p" style="-moz-user-select: none;" role="button" aria-disabled="true" title="">

<div id="top_next" class="a-b-c a-d-e a-d-e-o-q" tabindex="0" style="-moz-user-select: none;" role="button" title="">

К сожалению, jquery, который я пробовал, не работал, пока я отлаживал, я думаю, что наткнулся на проблему. Вот мой JQuery для отладки: 

$(document).ready(function()
{
$("#top_prev").click(function(){
       if ($(".a-b-c a-d-e a-d-e-j a-d-e-o-p").length ) {
          alert("top_prev success");
        }else
        {
          alert("top_prev fail");
        }
});

$("#top_next").click( function() {
if ($(".a-b-c a-d-e a-d-e-o-q").length )
{
   alert("top_next success");
}else
{
alert("top_next fail");
}
});

Что приводит к появлению полей "top_next fail" или "top_prev fail", даже когда эти div генерируются. Javascript и html для кнопок даже генерируются после панель результатов генерируется, поэтому нижние кнопки должны генерироваться перед верхними кнопками.

Полагаю, я озадачен тем, почему эти селекторы не работают. Вот оригинал .click jquery, который я пробовал: 

$(document).ready(function(){
$("#top_prev").click(function(){
  $(".a-b-c a-d-e a-d-e-j a-d-e-o-p").click();
});

$("#top_next").click(function() {
  $(".a-b-c a-d-e a-d-e-o-q").click();
});
});

Ответы [ 2 ]

0 голосов
/ 08 марта 2012

Альтернативой является клонирование существующих кнопок ...

(здесь я предполагаю, что предоставленный вами html предназначен только для кнопок пейджинга.) 

var $paging = $("google-visualization-table-div-page").clone(true);
$("#containerID").append($paging);

containerID будет идентификатором элемента div или span, который вы добавляете на страницу, и к нему будут добавлены кнопки.

Вот ссылка на клон и добавление ...

0 голосов
/ 08 марта 2012

Проблема в том, что ваш селектор для соответствия элементам внизу неверен.

Вы должны использовать; 

$(document).ready(function(){
    $("#top_prev").click(function(){
      $(".a-b-c.a-d-e.a-d-e-j.a-d-e-o-p").not(this).click();
    });

    $("#top_next").click(function() {
      $(".a-b-c.a-d-e.a-d-e-o-q").not(this).click();
    });
});

Селектор в форме .foo .bar сопоставляет все элементы с классом bar, которые являются потомками элемента с классом foo (селектор потомков) . Вместо этого вы должны использовать .foo.bar, который ищет все элементы с классами foo и bar.

...