Is it possible to use JQuery to trigger a click event on text inside

Trying to implement a JQuery method that triggers when the code below is clicked:

<div class="content_sub_list">
    <img src="/imgs/close-icon.jpg" class="exit_sub_list"/>
    hello
</div>

The current JQuery code in use:

$(document).ready(function() { 
    $('#my_accnt').click(function() {
      $('.content_sub_list').css("display", "block");
      $('.content_sub_list').css("margin-left", "4px");
      $('.content_sub_list').html('<div class="sub_list_header">My A<img src="/imgs/close-icon.jpg" class="exit_sub_list"/></div><BR />text');
    });
    $('#my_queue').click(function() {
      $('.content_sub_list').css("display", "block");
      $('.content_sub_list').css("margin-left", "165px");
      $('.content_sub_list').html('<div class="sub_list_header">My Q<img src="/imgs/close-icon.jpg" class="exit_sub_list"/></div><BR />text');
    });
    $('.exit_sub_list').click(function() {
        alert("hi");
        $('.content_sub_list').css("display", "none");
    });
});

The header includes:

<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/mContentBar.js" type="text/javascript"></script>

Everything works except this particular function. Any insights on what might be wrong or how I can fix it? Thanks.

Answer №1

I found a solution that works for me. It's important to ensure that jQuery is loaded correctly. You can either include jquery.js after your HTML or enclose your jQuery code within a document.ready function.

For example:

(function() {
    $('.exit_sub_list').click(
    
    function() {
        alert("hello");
    });
});

Take a look at the functional demo here: http://jsfiddle.net/k8R5s/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Smooth Div Scroll on Chrome

I'm currently utilizing a plugin called Smooth Div Scroll, which can be found at Despite the automatic scrolling functionality working perfectly on Firefox, IE, and Safari, I'm encountering an issue with it not initiating when the page loads in ...

What functionality does this method perform within React.js?

While going through the process of creating login forms, I stumbled upon this interesting method: handleChange(e) { this.setState({ [e.target.name] : e.target.value }); } I am a bit confused about the setState part in this method. The array brackets ...

Utilize JQuery AJAX to retrieve a PHP array and then store it in a JavaScript variable

I am facing a challenge that seems simple to resolve, but it's proving to be quite tricky. Currently, I have a functional PHP file that fetches data from a database and stores it in an array. This file does not require any parameters and the output i ...

Place the divs over the background image by using relative positioning

I am working on a project where I have a full-width div with a background image containing people. I want to display a tooltip when hovering over each person, but I am facing challenges in aligning the divs properly. Image maps with % widths do not seem t ...

What is the best way to keep the textfield value at 0? If you clear the textfield, it will result in another value being

If I don't input anything in this field, the total will show as isNaN, and I want to prevent form submission if it is isNaN. How can I stop the form from being submitted when the total value is isNaN? export default function BasicTextFields() { cons ...

The integration of PHP code with an HTML form is causing issues

When I use the insert_teacher('bla bla','bla bla','dqsd') function in a PHP file, everything works fine. However, when I try to implement it with an HTML form, nothing is displayed and no data is inserted into my database. &l ...

Tips for wrapping text labels in mat-slide-toggles (Angular Material)

Is there a way to get the title in mat-slide-toggle to wrap if it's too long while keeping its default position to the right of the toggle? <mat-slide-toggle class="slider">A really long title wrapped</mat-slide-toggle> I attemp ...

Configure the right-to-left directionality for a particular widget only

Is it possible to align the label inside a TextField component to the right, similar to "labelPlacement" on FormControlLabel? I am aware of using the RTL library with mui-theme, but that applies to the entire application. Is there a way to apply it to jus ...

displaying a div to indicate an action error

How can I make a div appear displaying information whenever there is an exception during the execution of my action? This is what I currently have: <div id="dvErrorMsg"> <a href="#" class="close">[x]</a> <p> <la ...

Iterate over an array of objects to showcase the property values within an HTML tag using JavaScript

I am a beginner in JavaScript and I am currently working on an exercise. My goal is to iterate through an array of objects within another object, map the index values from one object to the id values in another object, and based on that, perform a certain ...

Using *ngIf to construct SVG icons in Angular 2 doesn't contribute to the DOM in any way

I am currently utilizing icoMoon to import a series of SVG icons. The structure of the html I'm trying to create using ngIf is as follows: <div class="contactIcon"> <svg class="icon icon-envelop"> <use xlink:href="symbol-d ...

Enhance Your Vue Tables with Unique Custom Filters

I'm currently working on implementing https://github.com/matfish2/vue-tables-2 in Vue 2.1.8. Everything seems to be functioning flawlessly, but I need to incorporate custom filters to format certain fields based on their values. In my options object ...

Trouble with displaying results after submitting a form using jQuery ajax

I'm struggling to use ajax to submit a textarea form on the same page. My goal is to show the processed PHP data at the top of the page, but my lack of understanding in ajax is hindering me from achieving this. Here's the PHP code snippet at the ...

Clicking on various buttons will trigger the opening of different tabs within a single modal window

Imagine I have two distinct buttons, A and B. Within a single modal window, there exist two tabs labeled as a and b. My goal is to be able to click on A and have tab a displayed in the modal, while clicking on B should reveal tab b within that same modal. ...

Extract information from various files stored in Firestore

I have been struggling to retrieve data from multiple documents despite numerous attempts. The screenshot below displays that I have a collection of 3 documents, and my inquiry is how to extract data from each of them. https://i.stack.imgur.com/bFrIG.png ...

How can we use the jQuery toggle function to hide and show elements based on

When using the toggle function, I have noticed that it takes a considerable amount of time to load. As a solution, I attempted to include a loading image while the content loads; however, the image does not appear when the .showall is activated. This iss ...

Styling a playbook using CSS Grid management techniques

Exciting to create a playbook layout style, here's how it goes: Name: Text starting here - unique style #1 text that moves to a new line with a different look - unique style #2 more text continuing on another new line ...

After updating to the latest npm version, the NodeJS server continues to display the error message "Upgrade Required" when loading pages

After developing a Node project using NodeJS version 5.4.x and NPM version 3.3.12 on Windows, I encountered an issue where the project throws an "Upgrade Required" message (HTTP Error code - 426) upon loading the page after some time of inactivity. To add ...

The dropdown functionality in Bootstrap appears to be malfunctioning

Struggling to make the drop-down menu function properly in Bootstrap, but so far no success. Check out the code on this jsfiddle link. <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-to ...

"Exploring the seamless integration of easyXDM, AJAX, and En

In this new inquiry, I am facing a similar challenge as my previous query regarding loading a PHP file into a cross-domain page with dynamic element height. However, I am now exploring a different approach. Although I have managed to load my script into a ...