Data-filter connection in jQuery with HTML code

Question

const pagiselector = document.querySelector(".portfolio__filter__pagi");

function test(totalPages, page) {
  let pagicode = "";
  let beforePage = page - 1;
  let afterPage = page + 1;
  let activeLi = "";
  let totalP = totalPages;


  if (page > 1) {
    pagicode += `<a href="#" onclick="test(${totalP}, ${page - 1})" class="arrow__pagination left__arrow" data-filter=".pagi-${page - 1}"><li>
                <span class="arrow_left"></span> Prev</li></a>`;
                    
  }
  if (page > 2) {
    pagicode += `<a href="#" onclick="test(${totalP}, ${1})" class="number__pagination filter" data-filter=".pagi-${1}"><li>1</li></a>`;

}
  pagiselector.innerHTML = pagicode;

}

<section class="portfolio spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <ul class="portfolio__filter">
                    <li class="active" data-filter=".pagi-1">
                        All
                    </li>
                    <li data-filter=".photo">
                        Photo
                    </li>
                    <li data-filter=".photo_1">
                        Photo_1
                    </li>
                    <li data-filter=".photo_2">
                        Photo_2
                    </li>
                    <li data-filter=".photo_3">
                        Photo_3
                    </li>
                </ul>
            </div>
        </div>
        <div class="row portfolio__gallery">
            <div class="col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo">
                <div class="portfolio__item">
                    <div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
                        <a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
                    </div>
                    <div class="portfolio__item__text">
                        <h4>
                            image
                        </h4>
                        <ul>
                            <li>
                                portfolio
                            </li>
                            <li>
                                Photo
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo_1">
                <div class="portfolio__item">
                    <div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
                        <a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
                    </div>
                    <div class="portfolio__item__text">
                        <h4>
                            image
                        </h4>
                        <ul>
                            <li>
                                portfolio
                            </li>
                            <li>
                                Photo_1
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 mix pagi-2 photo_1">
                <div class="portfolio__item">
                    <div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
                        <a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
                    </div>
                    <div class="portfolio__item__text">
                        <h4>
                            image
                        </h4>
                        <ul>
                            <li>
                                portfolio
                            </li>
                            <li>
                                Photo_1
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 mix pagi-3 photo_2">
                <div class="portfolio__item">
                    <div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
                        <a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
                    </div>
                    <div class="portfolio__item__text">
                        <h4>
                            image
                        </h4>
                        <ul>
                            <li>
                                portfolio
                            </li>
                            <li>
                                Photo_2
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6 mix pagi-6 photo_3">
                <div class="portfolio__item">
                    <div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
                        <a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
                    </div>
                    <div class="portfolio__item__text">
                        <h4>
                            image
                        </h4>
                        <ul>
                            <li>
                                portfolio
                            </li>
                            <li>
                                Photo_3
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- function pagination code 
    <ul class="portfolio__filter__pagi">
        <li class="number__pagination" data-filter=".pagi-1">1</li>
        <li class="number__pagination" data-filter=".pagi-2">2</li>
        <li class="number__pagination" data-filter=".pagi-3">3</li>
        <li class="number__pagination" data-filter=".pagi-6">6</li>
        </ul>
        -->
        <!-- js pagination code -->
        <ul class="portfolio__filter__pagi">
            <!-- 
      <a href="#" onclick="test(6,1)" class="arrow__pagination left__arrow" data-filter=".pagi-1"><li>
            <span class="arrow_left"></span> Prev</li></a>
            <a href="#" onclick="test(6,1)" class="number__pagination" data-filter=".pagi-1"><li>2</li></a>
            <a href="#" onclick="test(6,2)" class="number__pagination active" data-filter=".pagi-2"><li>2</li></a>
            -->
        </ul>

I asked the wrong question here, so I'll try to ask it differently. I would like to create a page navigation using javascript and Data-filter. In the html code, the data-filter works perfectly, but when used in javascript, the Data-filter function only runs once when the TEST link is clicked. After another click, the function will no longer start. So how should I modify the code (if possible) so that the Data-filter works outside of javascript? I would like to preserve the structure of the js code.

Text += `<a href="#" class="number" data-filter=".text" onClick="test(1, 1)">Test</a>`;


    <div class="text">Text</div>
    <div class="text1">Text</div>
<script>
    function test(test1, test2) {
        let Text = "";
        Text += `<a href="#" class="number" data-filter=".text" onClick="test(1, 1)">Test</a> `;
        Text += ` <a href="#" class="number" data-filter=".text1" onClick="test(1, 1)">Test1</a>`;
        code.innerHTML = Text;
    }

Can you post reproducible code snippet ? I really tough to understand what issue to are facing. — Albert Einstein, Aug 10 '23 at 09:01
Please click [edit] then the `[<>]` snippet editor and create a [mcve] — mplungjan, Aug 10 '23 at 09:11
You likely want to delegate, but as already said, your question and expected output and processing is a mystery — mplungjan, Aug 10 '23 at 09:12
It helps (a little) to read the [previous question](https://stackoverflow.com/questions/76841757/correct-function-of-data-filter-launched-from-jquery) — mplungjan, Aug 10 '23 at 09:12
You *probably* want event binding on dynamically created elements (delegated events). As you're currently using `onclick=` it may be a big step to move to event binding and then to delegated event binding - but it's not as hard as it may appear and will *substantially* benefit your code going forward. Lookup event binding then also: [this SO question](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Aug 10 '23 at 09:40
Here is part of the code. Javascript pagination doesn't work the way I need it to. Thanks for your help and patience. — Josef Volný, Aug 10 '23 at 11:28

score 0 · Accepted Answer · answered Aug 10 '23 at 12:17

Instead of add onclick="test(${totalP}, ${1})" use addEventListener to bind the click event to your target element after you append your pagination. See the following example.

const pagiselector = document.querySelector(".portfolio__filter__pagi");

function test(totalPages, page) {
  let pagicode = "";
  let beforePage = page - 1;
  let afterPage = page + 1;
  let activeLi = "";
  let totalP = totalPages;


  if (page > 1) {
    pagicode += `<a href="#" onclick="test(${totalP}, ${page - 1})" class="arrow__pagination left__arrow" data-filter=".pagi-${page - 1}"><li>
                <span class="arrow_left"></span> Prev</li></a>`;

  }
  if (page > 2) {
    pagicode += `<a href="#" onclick="test(${totalP}, ${1})" class="number__pagination filter" data-filter=".pagi-${1}"><li>1</li></a>`;
  }

}

let pagiHtml = "";
for (let i = 0; i < 6; i++) {
  pagiHtml += `<a href="#" class="number__pagination filter" data-i="${i}" data-filter=".pagi-${i}"><li>${i}</li></a>`
}
pagiselector.innerHTML = pagiHtml;

let anchorsTags = pagiselector.getElementsByTagName("a");
for (var i = 0; i < anchorsTags.length; i++) {
  anchorsTags[i].addEventListener("click", myFunction, false);
}


function myFunction(event) {
  event.preventDefault();
  console.log(this.getAttribute('data-i'));

  // Your logic here
  //test(totalPages, page)
}

<section class="portfolio spad">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <ul class="portfolio__filter">
          <li class="active" data-filter=".pagi-1">
            All
          </li>
          <li data-filter=".photo">
            Photo
          </li>
          <li data-filter=".photo_1">
            Photo_1
          </li>
          <li data-filter=".photo_2">
            Photo_2
          </li>
          <li data-filter=".photo_3">
            Photo_3
          </li>
        </ul>
      </div>
    </div>
    <div class="row portfolio__gallery">
      <div class="col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo">
        <div class="portfolio__item">
          <div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
            <a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
          </div>
          <div class="portfolio__item__text">
            <h4>
              image
            </h4>
            <ul>
              <li>
                portfolio
              </li>
              <li>
                Photo
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-6 mix pagi-1 photo_1">
        <div class="portfolio__item">
          <div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
            <a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
          </div>
          <div class="portfolio__item__text">
            <h4>
              image
            </h4>
            <ul>
              <li>
                portfolio
              </li>
              <li>
                Photo_1
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-6 mix pagi-2 photo_1">
        <div class="portfolio__item">
          <div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
            <a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
          </div>
          <div class="portfolio__item__text">
            <h4>
              image
            </h4>
            <ul>
              <li>
                portfolio
              </li>
              <li>
                Photo_1
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-6 mix pagi-3 photo_2">
        <div class="portfolio__item">
          <div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
            <a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
          </div>
          <div class="portfolio__item__text">
            <h4>
              image
            </h4>
            <ul>
              <li>
                portfolio
              </li>
              <li>
                Photo_2
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-6 mix pagi-6 photo_3">
        <div class="portfolio__item">
          <div class="portfolio__item__video set-bg lazyloaded" data-setbg="<!-- image -->">
            <a href="<!-- image -->" class="play-btn" data-lbwps-width="480" data-lbwps-height="720" data-lbwps-srcsmall="<!-- image -->"><i class="fa fa-camera"></i></a>
          </div>
          <div class="portfolio__item__text">
            <h4>
              image
            </h4>
            <ul>
              <li>
                portfolio
              </li>
              <li>
                Photo_3
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- function pagination code 
    <ul class="portfolio__filter__pagi">
        <li class="number__pagination" data-filter=".pagi-1">1</li>
        <li class="number__pagination" data-filter=".pagi-2">2</li>
        <li class="number__pagination" data-filter=".pagi-3">3</li>
        <li class="number__pagination" data-filter=".pagi-6">6</li>
        </ul>
        -->
    <!-- js pagination code -->
    <ul class="portfolio__filter__pagi">
      <!-- 
      <a href="#" onclick="test(6,1)" class="arrow__pagination left__arrow" data-filter=".pagi-1"><li>
            <span class="arrow_left"></span> Prev</li></a>
            <a href="#" onclick="test(6,1)" class="number__pagination" data-filter=".pagi-1"><li>2</li></a>
            <a href="#" onclick="test(6,2)" class="number__pagination active" data-filter=".pagi-2"><li>2</li></a>
            -->
    </ul>

Data-filter connection in jQuery with HTML code

1 Answers1