Why isn't the click event working in this code? What am I doing wrong?
$(document).ready(function() {
$('.dashboardList').click(function() {
alert("hello");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dashboardList unread">
<div class="dashboardList unread">
<div class="dashboardList unread">
<div class="dashboardList unread">
<div class="dashboardList unread">Your divs need to be closed properly.
Please close them before proceeding.
$(document).ready(function() {
$('.dashboardList').click(function() {
alert("hello");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dashboardList unread">test</div>
<div class="dashboardList unread<test</div>
<div class="dashboardList unread">test</div>
<div class="dashboardList unread">test</div>
<div class="dashboardList unread">test</div>If you're interested in learning more about the .on() feature in jQuery, check out the official documentation here.
To see this feature in action, try running the code snippet below:
// Ensure the DOM is fully loaded
$(document).ready(function(){
// Attach a click event and its corresponding function to the selector
$('.dashboardList').on('click', function(){
// Display the text content of the clicked div
alert($(this).text());
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dashboardList unread">test 1</div><br />
<div class="dashboardList unread">test 2</div><br />
<div class="dashboardList unread">test 3</div><br />
<div class="dashboardList unread">test 4</div><br />
<div class="dashboardList unread">test 5</div><br />Your HTML needs some adjustments for correctness:
$(document).ready(function() {
$('.dashboardList').click(function() {
alert("hello");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dashboardList unread">1</div>
<div class="dashboardList unread">2</div>
<div class="dashboardList unread">3</div>
<div class="dashboardList unread">4</div>
<div class="dashboardList unread">5</div>Take a look at this bin, everything seems to be working correctly
http://jsbin.com/kicikojuza/edit?html,css,js,output
I just closed all the divs
<div class="dashboardList unread">one</div>
<div class="dashboardList unread">two</div>
<div class="dashboardList unread">tree</div>
<div class="dashboardList unread">for</div>
<div class="dashboardList unread">five</div>
and added a log alert function
$(document).ready(function(){
$('.dashboardList').click(function(e){
alert("Hello, I am " + e.target.innerText);
});
});
I'm currently developing a flexible component that allows the list view to be utilized by different components. However, the challenge arises from the fact that each component has a different data format. In my project, I'm unable to use type any ...
My current challenge involves POSTing to a server using Request JS, specifically with some difficulties related to the path. return await request.get({ method: 'POST', uri: `${domain}/info/test/`, body: bodyAsString, head ...
I have included the child component in the parent component and I am displaying that child component within a col-md-8. What I want to achieve is to highlight a specific div in the child component with additional text, making it equal in size to the parent ...
Having some trouble with my HTML report created from RMarkdown and applying CSS. The browser version displays correctly, but when printed, the styling doesn't come through. Below is an example of the RMarkdown code: --- title: "Table" output: html_ ...
I am facing an issue with accessing a .xls file using the ExcelJS library. Interestingly, there are no issues when it comes to reading .xlsx files. Previously, I relied solely on the xlsx js library and never encountered any problems while accessing .xls f ...
Currently, I am displaying profile images using session like the following code snippet: <img src="<?php if (isset($_SESSION['userimage'])){ echo $_SESSION['userimage']; }?>" /> What are the advantages and disadvantages of ...
I have a script that performs two ajax calls - the second one is nested within the success handler of the first. However, I need to utilize the data retrieved in the first success handler as an additional variable to send in the second ajax call, and then ...
I've been working with a jQuery multilayer menu, but I encountered an issue with the link not being clickable. For reference: jQuery: JS Array Demo: When navigating through the menu on the demo site - "devices" -> "Mobile phones" -> "super s ...
I'm currently working on an app that allows users to choose which type of vuetify element they want to display on the page. There are 4 options available for selection. My goal is to render the corresponding vuetify component when a user clicks on the ...
I have a button that triggers an ajax call to this URL: http://jsonplaceholder.typicode.com/. When the code doesn't use $.each(), it retrieves just one post. However, when $.each() is utilized, it returns four objects. Refer to the screenshot below: ...
I am presenting the following data in a table: <table class="neo-table"> <tr> <td>Day of final discharge home</td> <td>{{ form_widget(form.mHomeDischargeDay, {'id': 'M_Home_discharge_day', ' ...
Currently, I am in the process of developing a desktop application using ElectronJS and ReactJS. To bundle the renderer process that utilizes JSX, I have opted to use webpack. An issue arises when attempting to import anything from electron into the rend ...
Currently, I am working with a Kendo UI DateTimePicker that provides the selected date in the following format: Thu Dec 15 2016 23:23:30 GMT-0500 My objective is to pass this date into moment.js for extracting the day information like so: var momentDate ...
I've developed a script to assign editors to a spreadsheet, but I'm looking to personalize the emails sent to them. The screenshot below illustrates the step where I can input a message for the email recipients who have been granted access. f ...
As a newcomer to nodejs, I've encountered an issue where my Android Smartphone is unable to maintain a stable connection with my Node Js Server. Specifically, when the webpage remains open and the Smartphone enters LockedScreen Mode, the device will d ...
I'm having an issue with the script below where the reset button is acting like a submit button as well. Can anyone help me troubleshoot this problem? Thank you. HTML <input type="image" name="submit" value=" " src="image.png"> <input t ...
I recently created a simple holding page on www.tomrankinmusic.com The Webfonts I embedded in the page display correctly in the latest versions of Firefox, Safari, and Chrome on Mac OSX Lion 10.7.4 but do not show up in Chrome and IE6 on Windows XP Pro, d ...
I'm attempting to organize my array of objects that contain a date property. I need to arrange the array based on ascending or descending dates. I've attempted the following approach: https://jsfiddle.net/rxaLutgn/1/ function sort_by(field, rev ...
Within this example, I've created two functional components that mimic separate pages with differently colored <div> boxes. const Home = () => <div style={{background:'red', height: 100, width: 100}}></div>; const ...
I'm relatively new to the world of Javascript, CSS, and HTML. Currently, I'm attempting to anchor a div to the center and bottom of its parent div. The parent div contains a responsive background image and my fa fa-arrow icon is correctly positi ...