0

I have the following code that will hide an element when it is clicked:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

<script> 
$(document).on("pagecreate","#pageone",function(){   

$("p").on("taphold",function(){
        $(this).hide();   
});                        

}); 

</script> 
</head>

The taphold Event

If you tap and hold me for one second, I will disappear.

Tap and hold me!

Tap and hold me too!

Footer Text

What I would like to do is change the <p> to <div> elements and click on different divs to hide them:

<div id='d1'>If you tap and hold me for one second, I will disappear.</div>
<div id='p4'>Tap and hold me!</div>
<div id='g7'>Tap and hold me too!</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
shiri
  • 115
  • 2
  • 12
  • You can refer to this SO answer for your desired output. [SOAnswer](http://stackoverflow.com/questions/4080497/how-can-i-listen-for-a-click-and-hold-in-jquery) – danish farhaj Dec 26 '16 at 10:43
  • Not quite. This listens to specific DIVs, but what if I have 60 of them? – shiri Dec 26 '16 at 12:26
  • Why you need convert `p` to `div` ? – nartoan Dec 26 '16 at 12:35
  • The example I posted uses p, I want to use div instead because I have a lot of divs where I would to use click-hold to hide. I already use doubleclick and click for other functions. – shiri Dec 26 '16 at 12:37

2 Answers2

1

I don't actually understand. Do you want to click on div instead of p

Then just change the p in jquery to div

<div id='d1' class="clickme">If you tap and hold me for one second, I will disappear.</div>
<div id='p4' class="clickme">Tap and hold me!</div>
<div id='g7' class="clickme">Tap and hold me too!</div>
<script> 
$(document).on("pagecreate","#pageone",function(){   

$(".clickme").on("taphold",function(){

  var id  = $(this).attr('id');
  $("#"+id).hide();   
});                        

}); 

</script>
Ali Rasheed
  • 2,765
  • 2
  • 18
  • 31
  • In the original code it uses

    , but now I actually want to click on DIVs with IDs. I've tried your version before posting this and it didn't work for me.

     – shiri Dec 26 '16 at 12:17
  • Try this. Now it gets it's id and hides that `div` that matches with that `id` – Ali Rasheed Dec 26 '16 at 12:27
  • It still doesn't work for me. What it does is that it hides all the divs, not the one that I clicked. – shiri Dec 26 '16 at 12:38
  • I tried this: $(document).on("taphold",function(){ alert($(this).innerHTML); }); Just to see the content of what I clicked. It alerts the element but not the content. – shiri Dec 26 '16 at 12:44
  • Add a class name. and try getting `div` through that class and then get the `id` and hide that `div` – Ali Rasheed Dec 26 '16 at 12:52
  • That's a lot better. Is there a way to run this code without "$(document).on("pagecreate","#pageone",function(){ "? – shiri Dec 26 '16 at 13:08
  • I don't know the dept of it but I guess this code is working fine. Don't forget to accept the answer :) – Ali Rasheed Dec 26 '16 at 16:29
  • Thanks again and yes this is the best answer. I would prefer to reference the DIV id instead of the class but it works. – shiri Dec 27 '16 at 02:21
1

Thanks to some tips from Ali Rasheed,

the changes in code are as followed:

<div id='d1'>If you tap and hold me for one second, I will disappear.</div>
<div id='p4'>Tap and hold me!</div>
<div id='g7'>Tap and hold me too!</div>

$(document).on("pagecreate","#pageone",function(){   

$("p").on("taphold",function(){
        $(this).hide();   
});

to:

<div id='d1' class="clickme">If you tap and hold me for one second, I will disappear.</div>
<div id='p4' class="clickme">Tap and hold me!</div>
<div id='g7' class="clickme">Tap and hold me too!</div>

$(document).on("pagecreate","#pageone",function(){   

$(".clickme").on("taphold",function(){

  var id  = $(this).attr('id');
  $("#"+id).hide();   
});

Most importantly, this will NOT work without the following added to your code:

<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script src="jquery.mobile-1.4.5.min.js"></script>

You need jquery.mobile otherwise tap-hold will not work at all.

Hope that helps!

shiri
  • 115
  • 2
  • 12
  • Of course you need `cdn` to make jquery work! That is the initial step you have to take! – Ali Rasheed Dec 27 '16 at 10:26
  • And beneath those voting UP and DOWN buttons there is a Green tick button. Please approve answer if my code worked for you – Ali Rasheed Dec 27 '16 at 10:27
  • Done, I didn't know that I needed jquery.mobile to do this as I've been trying to do it without jquery without success. – shiri Dec 27 '16 at 10:36