Getting a jQuery alert on iOS devices: A step-by-step guide

The notification using 

<span class="close">&times;</span>
functions perfectly on all desktop browsers, but unfortunately fails to trigger on mobile devices ... When attempting to view the page on an iPhone, the 
<span class="close">&times;</span>
does not generate any alert.

Any suggestions on how to resolve this issue?

var closebtns = document.getElementsByClassName("close");
var i;

for (i = 0; i < closebtns.length; i++) {
  closebtns[i].addEventListener("click", function() {
alert("X was clicked");
  });
}
      body {font-family: sans-serif;}

input { font-size: 1em; } /* prevent zoom in mobile */

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  position: relative;
  min-height: 1em;
  z-index: 999;
  max-width: 360px;
}

ul li:hover {
  background-color: #eee;
}


/* sortable plugin styles when dragged */
.dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
}

li.placeholder {
position: relative;
background: purple; 
}

.close {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0%;
  padding: 12px 16px;
  transform: translate(0%, -50%);
  z-index: 99999;
}

.close:hover {background: #bbb;}
<div id="sort-it">
    <ul>
      <li>This is item #1<span class="close">&times;</span></li>       
      <li>This is item #2<span class="close">&times;</span></li>        
      <li>This is item #3<span class="close">&times;</span></li>        
      <li>This is item #4<span class="close">&times;</span></li>      
      <li>This is item #5<span class="close">&times;</span></li>
    </ul>
</div>

jqueryhtmlioscssiphone

Answer №1

Learn how to create a mobile-friendly button click with this solution. Simply add touchstart to the click event.

$('.close').on('click touchstart', function(e)


$(document).ready(function() {
$('.close').on('click touchstart', function(e) {
e.stopPropagation(); e.preventDefault();
alert($(this).closest('li').attr('id'));
});
});
  body {font-family: sans-serif;}

input { font-size: 1em; } /* prevent zoom in mobile */

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  position: relative;
  min-height: 1em;
  max-width: 360px;
}

ul li:hover {
  background-color: #eee;
}


/* sortable plugin styles when dragged */
.dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
}

li.placeholder {
position: relative;
background: purple; 
}

.close {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0%;
  padding: 12px 16px;
  transform: translate(0%, -50%);
  background: #fff;
}

.close:hover {background: #bbb;}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="sort-it">
    <ul>
      <li id="ID_1">This is item #1<button class="close">&times;</button></li>       
      <li id="ID_2">This is item #2<button class="close">&times;</button></li>        
      <li id="ID_3">This is item #3<button class="close">&times;</button></li>        
      <li id="ID_4">This is item #4<button class="close">&times;</button></li>      
      <li id="ID_5">This is item #5<button class="close">&times</button></li>
    </ul>
</div>

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

Basic animation feature malfunctioning

So, I'm really new to this whole HTML5 canvas thing and I'm trying to make a pixel move across the screen with an additive tail behind it. The idea is for the tail to scroll away once it reaches a certain point while the pixel continues moving. I ...

javascripthtmldhtml

CSS Media Query Assistance - optimizing text display for mobile responsiveness

I am currently facing an issue with my CSS code where the content is displaying as one long sentence on mobile devices, requiring users to scroll to read it. I am trying to modify it so that it displays as two lines on mobile. <!-- promo banner --> ...

htmlcssresponsive-designhidden

What could be the reason for the selection box in my form not changing the items when togg

I'm having an issue with my form selection box code that used to work but is now not functioning properly. Could someone please help me identify where the error lies? Essentially, I have a form with the ID #main and a select box named #chart-type. Th ...

javascriptjqueryhtml

How can I dynamically change the orderBy parameter based on conditions in an Angular application?

I need to dynamically change the orderBy parameter in a table row based on the result of a method. Here is an example of my current tr setup - <tr class="pl" ng-repeat="thing in things | orderBy:'oldId':reverse" ng-class="{'row-error&apo ...

javascripthtmlangularjs

Mastering the Art of Line Breaks in WordPress

I am looking for a way to break a WordPress site title over two lines at a specific point in the text. Since the WordPress content filter 'wpautop' disables the ` ` tag (also known as ` ` or ` `), I'm wondering what the best alternative ...

htmlcsswordpresstexthref

Misconception about the usage of jQuery's .each() function clarified with an illustrative example

Problem Description (See Fiddle): When clicking on the red boxes, they transform into kittens and display an alert with the current value of i. Clicking on a large fading kitten will reset everything. I am puzzled as to why alert(i) is triggering multipl ...

javascriptjqueryhtmlcsseach

Image source not functioning properly

I am attempting to dynamically load an image and HTML using Angular but it doesn't seem to be working. Here is what I have tried: <img ng-src="img/{{product.Category}}/{{product.id}}.jpg"> and also this: <img src="img/{{product.Category}}/ ...

htmlangularjs

Updating a specific row in a table using PHP and SQL

I am having an issue with updating rows in a table that pulls information from a database. Each row has an input tag labeled COMPLETE, which the user can click on to update the database by changing a boolean field from 0 to 1. However, I am facing a prob ...

phphtmlmysql

Guide to sending ajax content to a controller in codeigniter

Having trouble posting data to the controller in CodeIgniter for autocomplete functionality with a database. Struggling to send typed or selected data from the view to the controller using AJAX. Below is the AJAX function: var i=$('table tr').le ...

phpjqueryajaxcodeigniter

Issue with jquery-scrollify causing overflow content to display incorrectly. Overlapping content and inconsistent behavior across varying page widths

I'm in the process of creating my own personal website and want to incorporate the jQuery-scrollify tool to navigate through different sections. However, no matter what settings I try, I can't seem to get the scrolling behavior consistent across ...

jqueryjquery-scrollify

Deselect a radio button with a click event using jquery

When the page refreshes, radio buttons are left unchecked. <input type="radio" name="test"> 1<input type="radio" name="test">2 <input type="button" id="btn" /> $("#btn").click(function(){ $(':radio').each(function () { ...

jqueryhtmltwitter-bootstrapradio-buttonunchecked

Extracting information from JSON using jQuery

this is a sample json object: { "box 1": [{ "difficulty_grade": "5a+" }, { "gym": "New_gym" }, { "route_author": "some author" },]} Here is the code snippet: variable groups contains JSON data as shown in the image. for (var k in groups){ $p ...

javascriptjqueryjson

Custom Sizing for Bootstrap Modals

I need assistance with creating a dynamic bootstrap modal that adjusts its width based on the content and includes a vertical scrollbar when needed. Although the vertical scrollbar is functioning correctly, the horizontal width appears to be static. C ...

csstwitter-bootstrap

Attempting to iterate through and retrieve the names listed in the table

I have a code that I need help with in extracting names from td elements using jQuery. In certain instances, if the td is empty, I want to merge the left-side td with the 5 right-side tds because the first td on the right side is empty and the second td c ...

javascriptjquery

Adjust the positioning of the content within each card inside the modal box

I require assistance in adjusting the CSS for different cards within the modal box. I would like all cards to have consistent column width for various content within them, creating a symmetrical appearance. Currently, the cards appear staggered. Also, plea ...

htmlcssbootstrap-4

How much will it set me back for '`$(this)`?

Many individuals in this community frequently recommend caching the jQuery object generated from a DOM element, as illustrated by the following code snippet: $('#container input').each(function() { $(this).addClass('fooClass'); ...

javascriptjqueryperformance

What is the best way to use a jQuery variable within a .css() function

I'm working on a typewriter effect with some advanced CSS code. I need the program to calculate the length of a PHP variable and adjust the cursor animation steps accordingly. Basically, I want the cursor movement in the animation to be determined by ...

phpjqueryhtmlcss

How can I stop receiving notifications from APNS?

During testing, I successfully registered myself to APNS and obtained my device token in application:(UIApplication*)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData*)deviceToken Now, how can I unregister myself so that I will be promp ...

iosapple-push-notifications

"Creating dynamic web apps with the powerful duo of Meteor and Zurb

Just starting out with programming and currently working on a new web application using Meteor and AngularJS. I would like to incorporate the elements/css from 'Zurb Foundation For Apps' into my project... I am familiar with including Bootstrap ...

javascriptcssangularjsmeteorzurb-foundation-apps

What is the best way to add color to a div at the bottom of a page using

https://i.sstatic.net/5kOt7.png I noticed in the image that there is a navy blue color applied to a div at an angle. How can I achieve this effect using Bootstrap in my ASP.NET Core project? ...

htmlbootstrap-4asp.net-core-mvc