jqueryui Аккордеон Динамическое поведение контента - PullRequest
Новая
       22

jqueryui Аккордеон Динамическое поведение контента

0 голосов
/ 25 июня 2018

Отредактировано для обновления, чтобы добавить к id и добавить код .accordion.

Я использую Jqueryui и создаю динамический список аккордеонов.При щелчке содержимое представляет собой страницу php с уникальным маркером.Ниже приведена часть javascript, который создает серию аккордеонов: (возврат каретки примечаний добавлен для удобства чтения ниже) 

$('<h3 style="background:black;color:white;padding:2px;">
<a hidden href="subpage.php?crs='+val.idrepro+'"></a>
<div style="display:table-cell;padding-right:12px;vertical-align:middle;">
<p class="ui-icon ui-icon-circle-check" style="zoom:2;margin:0;" title="'+val.idrepro+'"></p>
</div></h3>
<div>Loading... Please wait.</div>').appendTo('#accord');

где val.idrepro отличается для каждого из примерно ста названий аккордеонов. 

$( "#accord" ).accordion({
    collapsible: true,
    active : false,
    icons: null,
    heightStyle: "content",
    activate: function (e, ui) {
      $url = $(ui.newHeader[0]).children('a').attr('href');
  $.get($url, function (data) {
     $(ui.newHeader[0]).next().html(data);
      });
    }
 });

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

У меня есть кнопки, которые запускают модальные формы.Если было пройдено более одного аккордеона, вам может потребоваться нажать кнопку для модальных 2,3,4 раза и т. Д., Чтобы открыть модальное окно.

Я в тупике.

Ответы [ 2 ]

0 голосов
/ 25 июня 2018

Хорошо, разобрался.Моя дочерняя php-страница содержала информацию заголовка, которая снова вызывала скрипт jqueryui.Удаление данных заголовка устранило проблему.Первоначально страница была разработана для загрузки в отдельном окне, и мне не пришло в голову, что это вызовет конфликт при вызове аккордеоном.

Я удалил весь код, который был избыточен для родителя.Код удален: 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO8859-15" />
<title><?echo($repname = $repsetupa['name']);?></title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="js/jquery-ui-1.12.1.custom/jquery-ui.css" />
<style>
.ui-controlgroup-vertical {width: 150px;}
.ui-controlgroup.ui-controlgroup-vertical > button.ui-button,
.ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label {text-align: center;}
#car-type-button {width: 120px;}
.ui-controlgroup-horizontal .ui-spinner-input {width: 20px;}
.ui-tooltip, .arrow:after {background: black;border: 2px solid white;}
.ui-tooltip {padding: 10px 20px;color: white;border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;text-transform: uppercase;
    box-shadow: 0 0 7px black;
}
.arrow {width:70px;height:16px;overflow:hidden;position: absolute;
    left: 50%;margin-left: -35px;bottom: -16px;
}
.arrow.top {top: -16px;bottom: auto;}
.arrow.left {left: 20%;}
.arrow:after {content: "";position: absolute;left: 20px;top: -20px;width: 25px;
    height: 25px;box-shadow: 6px 5px 9px -9px black;-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);transform: rotate(45deg);
  }
.arrow.top:after {bottom: -20px;top: auto;}
.overflow {height:200px;overflow-y:scroll;overflow-x:hidden;}
.custom-combobox{position: relative;display: inline-block;}
.custom-combobox-toggle{position: absolute;top: 0;bottom: 0;
    margin-left: -1px;padding: 0;}
.custom-combobox-input{margin: 0;padding: 5px 10px;}
.ui-autocomplete{overflow-y:scroll;height:200px;overflow-x:hidden;}
</style>
<script src="js/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script src="js/jPages.js"></script>
0 голосов
/ 25 июня 2018

Проблема в том, что вы пытаетесь добавить элемент в класс. Селектор класса выбирает все элементы, которые имеют этот класс, вы должны использовать вместо этого идентификатор.

...