There is such a block for turning the "pages" of the table. When a lot of them.

<div id="pages"> <div class="ui grid"> <div class="three wide column"> <div class="ui small right labeled input fluid"> <input type="text"> <div class="ui basic label">из 125</div> </div> </div> <div class="column"> <div class="ui small basic icon buttons"> <button class="ui button"> <i class="arrow left icon"></i> </button> <button class="ui button"> <i class="arrow right icon"></i> </button> </div> </div> </div> </div>

Trying to make it reusable. In the method for setting the events of the buttons and input fields, pass the id and the function of the event. And here the oddities begin:

$("#pages") - finds the item

 var node = $("#pages"); node.find("input");

does not find the item

 var node = $("#pages"); node.find("button.ui.button").has("i.arrow.left.icon");

does not find the item

UPD

Regarding the dynamics, I forgot to mention: <div id="pages"> is a vue object, it has a condition, if the number of pages is more than 10, show as content <div class="ui grid"> , if less is another. And the strangest thing is that in the v-if block the search works, but in the v-else it does not.

The method of binding events to buttons is called so as to take into account the changes made:

 vuePages.$nextTick(function(){initInput(jqSelector, event);});

At the same time, getting input from $ ("# pages") on pure js turned out without problems

    2 answers 2

     $(function(){ console.log("First:"); var node = $("#pages"); console.log(node.find("button.ui.button").has("i.arrow.left.icon").length); console.log("Second:"); console.log($("#pages").find("button.ui.button").has("i.arrow.left.icon").length); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pages"> <div class="ui grid"> <div class="three wide column"> <div class="ui small right labeled input fluid"> <input type="text"> <div class="ui basic label">из 125</div> </div> </div> <div class="column"> <div class="ui small basic icon buttons"> <button class="ui button"> <i class="arrow left icon"></i> </button> <button class="ui button"> <i class="arrow right icon"></i> </button> </div> </div> </div> </div>

    If you just look at the static code, then everything works, as you can see in the example.

    Most likely, your page dynamically replaces something, draws or modifies something, and in the dynamic DOM you no longer find the elements that you saw in the static starting code variant.

    Use any debugger, there is in all modern browsers, F12 by default, and look at the elements by the Inspector. It will show exactly the dynamic state.

    • My cant. Added information on the dynamics. - Riĥard Brugekĥaim
    • It may be worthwhile to render the navigation behind a DOM container that dynamically changes? Then you will not have to re-tie up, and you will not have to suffer with dynamics. - wirtwelt
    • I have an option for the extreme case (last line). There is still hope of doing all this without going through the elements manually. - Riĥard Brugekĥaim

    Here I make a log just on your code, and everything finds as it should.

    It is possible that you simply did not save the items found in any variable.

     $(document).ready(function(){ var node = $("#pages"); var tmp = node.find("input"); console.log(tmp); tmp = node.find("button.ui.button").has("i.arrow.left.icon"); console.log(tmp); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pages"> <div class="ui grid"> <div class="three wide column"> <div class="ui small right labeled input fluid"> <input type="text"> <div class="ui basic label">из 125</div> </div> </div> <div class="column"> <div class="ui small basic icon buttons"> <button class="ui button"> <i class="arrow left icon"></i> </button> <button class="ui button"> <i class="arrow right icon"></i> </button> </div> </div> </div> </div>