I have a div class which is essentially a button that I'm trying to click using jQuery

<div class="tool-button refresh-button icon-tool-button" title="Refresh"><div class="button-outer"><span class="button-inner"><i class="fa fa-refresh text-blue"></i> </span></div></div>

Here is what I tried but the log confirms the length is 0 thus not selected, any suggestions?:

console.log($('.div.tool-button .refresh-button icon-tool-button:first'))

console.log($('.div.tool-button .refresh-button icon-tool-button'))

CodePudding user response：

You had multiple problems with the selector.

1. Remove . before div since its a tag not a class.
2. Remove the spaces between the classes, when there is space between them jquery is looking for element thats a child to the previous selector.

console.log($('div.tool-button.refresh-button.icon-tool-button:first').length);

console.log($('div.tool-button.refresh-button.icon-tool-button').length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tool-button refresh-button icon-tool-button" title="Refresh">

</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can use click() method

const btn = $(".tool-button.refresh-button.icon-tool-button");
btn.click();

Do you want to select first element?

const btn = $(".tool-button.refresh-button.icon-tool-button")[0];
btn.click();

CodePudding user response：

In your solutions, you trieing to get:

<div class="tool-button">
  <div class="refresh-button">
    <div class="icon-tool-button"> // this
    </div>
  </div>
</div>

If you delete spaces on string, you can access your element.

Solution is

$(".tool-button.refresh-button.icon-tool-button")

Detailed answer: https://stackoverflow.com/a/59406548/11969749