Блог

Я пытаюсь использовать плагин Adaptive Horizontal Tab Menu для сортировки моих заказов на основе различных условий (таких как самые новые, наиболее похожие и т.д.). Я использую ajax и частичную загрузку для загрузки результатов фильтрации. Нет никаких проблем увидеть выбранный мной тип сортировки перед отправкой ajax-запроса. Проблема возникает, когда частичное представление заменяется внутри html. Я использую Jquery для процесса ajax. Я знаю, что должен использовать что-то вроде follow, но это вообще не работает. Я думаю, это связано с плагином, который я использую. я ввел html- и javascript-код.

  <div id="tabs" class="ah-tab-wrapper dt-sl">
                            <ul id="tabul" class="ah-tab dt-sl orderby">
                                <li id="1" class="ah-tab-item" value="1" data-ah-tab-active="true">
                                    مرتبط ترین
                                </li>
                                <li id="2" class="ah-tab-item" value="2">
                                    پربازدیدترین
                                </li>
                                <li id="3" class="ah-tab-item" value="3">
                                    جدیدترین
                                </li>
                                <li id="4" class="ah-tab-item" value="4">
                                    پرفروش ترین
                                </li>
                                <li id="5" class="ah-tab-item" value="5">
                                    ارزان ترین
                                </li>
                                <li id="6" class="ah-tab-item" value="6">
                                    گران ترین
                                </li>
                            </ul>
                        </div>
  

код javascript:

 $(document).on('click', '#tabul.ah-tab li', function (e) {
    alert($(this).val());});
  

Простой выбор этого ul по идентификатору или его классу не работает. Я действительно в замешательстве. любая помощь очень ценится. Большое вам спасибо.

Не уверен на 100%, что вам нужно, но с помощью приведенного ниже кода вы можете отобразить все идентификаторы по порядку.

Или отобразить все <li> элементы, у которых есть data-ah-tab-active="true" атрибут.

ФРАГМЕНТ:

 $(document).on('click', '.optionA', function() {
  var arr = $(".ah-tab-item").map(function() {
    return this.id; // RETURN ID OF LI ELEMENT
  });
  $("#result").html(""); // CLEAR DIV RESULTS
  $("#result").append(arr.get().join(", ")); // SHOW RESULTS
});

$(document).on('click', '.optionB', function() {
  var arr = $(".ah-tab-item[data-ah-tab-active=true]").map(function() {
    return this.id; // RETURN ID OF LI ELEMENT
  });
  $("#result").html(""); // CLEAR DIV RESULTS
  $("#result").append(arr.get().join(", ")); // SHOW RESULTS
});  

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tabs" class="ah-tab-wrapper dt-sl">
  <ul id="tabul" class="ah-tab dt-sl orderby">
    <li id="1" class="ah-tab-item" value="1" data-ah-tab-active="true">ONE</li>
    <li id="2" class="ah-tab-item" value="2">TWO</li>
    <li id="3" class="ah-tab-item" value="3">THREE</li>
    <li id="4" class="ah-tab-item" value="4" data-ah-tab-active="true">FOUR</li>
    <li id="5" class="ah-tab-item" value="5">FIVE</li>
    <li id="6" class="ah-tab-item" value="6">SIX</li>
  </ul>
</div>
<div>
<button type="button" class="optionA btn btn-primary">Display ALL LI id's by current sort</button>
</div>
<button type="button" class="optionB btn btn-secondary">Display ALL LI id's which have attribute "data-ah-tab-active = active"</button>

<div class="card">
  <div id="result" class="card-body">Click a button above</div>
</div>