To interact with a dynamic div that is generated without any specific ID or class, which is contained within a fixed div, you can

Question

To interact with a dynamic div that is generated without any specific ID or class, which is contained within a fixed div, you can

Is there a way to trigger a click function using JQUERY on the div that includes the text "Save as JPEG"? The div with the ID "graph1" remains static while all other nested divs are dynamic. Please note that the dynamic div containing the text does not have any specific class or ID assigned.

<div id="graph1" class="col-sm-12" style="height: 250px">
    <div class="contianer">
        <div class="convascharttoolbar">
            <div>
                <div>save jpeg</div>
                <div>save png</div>
            </div>
        </div>
    </div>
</div>

javascript jquery css

Answer 1

Answer №1

Utilize the :contains(TEXT) selector to target all elements containing a specific text.

$("div:contains('search query')").on("click",function(){
  console.log(this.textContent);
});

Answer 2

Utilize the :contains(TEXT) selector to target all elements containing a specific text.

$("div:contains('search query')").on("click",function(){
  console.log(this.textContent);
});

Answer 3

Answer №2

Live Example

$(document).ready(function() {
  
  $("#graph1").on('click','div', function() {
    if($(this).text() == "save as jpeg"){
      alert('Div clicked')
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="graph1" class="col-sm-12" style="height: 250px">
  <div class="contianer">
    <div class="convascharttoolbar">
      <div>
        <div>save as jpeg</div>
        <div>save png</div>
      </div>
    </div>
  </div>
</div>

Answer 4

Live Example

$(document).ready(function() {
  
  $("#graph1").on('click','div', function() {
    if($(this).text() == "save as jpeg"){
      alert('Div clicked')
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="graph1" class="col-sm-12" style="height: 250px">
  <div class="contianer">
    <div class="convascharttoolbar">
      <div>
        <div>save as jpeg</div>
        <div>save png</div>
      </div>
    </div>
  </div>
</div>

To interact with a dynamic div that is generated without any specific ID or class, which is contained within a fixed div, you can

Answer №1

Answer №2

Similar questions

The second instance of a React Paginate on the same page remains static and does not trigger a

Import objects into THREE.js using OBJLoader, convert to Geometry, apply transformations, and finally convert to BufferGeometry

Disable the add to cart popup in Prestashop while keeping the ajax add to cart functionality active

There are two images within a container - one as the background and the other as the foreground. What measures can I take to

Is it possible to use font-face in CSS3 to switch fonts for different languages?

Tips for identifying the version of a package that is installed using a package-lock.json file containing lockfileVersion = 3

Showing SQL query results on a Leaflet map

How can I adjust a centered container div to fit properly on a mobile device

a handy jquery tool that smoothly glides a div element across the screen from one end to the other

Display a JSON object on a web browser

Retrieving radio button values in React from a different component

The focusable attribute in SVG is malfunctioning

Server side progress bar with Jquery

Is it feasible to navigate through submenus using only the [Tab] key in CSS?

The Eclipse Phonegap framework is experiencing difficulty in loading an external string file with the jquery .load function

State loss occurs when moving to a different page using next/link

The issue of empty data in Symfony 3 Form Ajax Post Requests

Is it possible to use JavaScript to save and preserve the current state of a webpage?

Is it a scope issue if ng-click is not firing and the function is not working properly?

Animating back with a jQuery if statement