jQuery onclick事件/具有通用onclick事件的参数的范围

Question

How would I capture additional details in a div/span tag with a generic onclick event?

Ie,

<span id=item1>Value #001<span id=clickableitem>xxx</span></span>
<span id=item2>Value #002<span id=clickableitem>xxx</span></span>
<span id=item3>Value #003<span id=clickableitem>xxx</span></span>

And then:

$(document).on('click','#clickableitem',function(e){
e.preventDefault();

// how do I get the "value #001, #002, #003" value just 'outside'
// of the span tag?

I was trying to figure it out with .parent().html(), but that didn't quite seem to work...

Thanks!

Answer 1

The id property should always be unique, instead give your span's a common className and hook up the event handler callback with it, also, in your HTML you need to put single or double quotes around the values of properties such as id and class:

HTML:

<span id='item1'>Value #001<span id='clickableitem1' class='spanClickable'>xxx</span></span>
<span id='item2'>Value #002<span id='clickableitem2' class='spanClickable'>xxx</span></span>
<span id='item3'>Value #003<span id='clickableitem3' class='spanClickable'>xxx</span></span>

JQuery:

$(document).on('click','.spanClickable',function(e){
   e.preventDefault();
   //Using .text() on the parent produces the child span text as well
   //Replace the child text and the word Value since all you want is 
   //ex. #001
   const childSpanText = $(this).text();
   alert($(this).parent().text().replace(childSpanText, "").replace('Value ', ''));
});

Working Fiddle ( https://jsfiddle.net/a5Lkon4j/2/ )

Answer 2

HTML:

<span id=item1>Value #001<span class="clickableitem">xxx</span></span>
<span id=item2>Value #002<span class="clickableitem">xxx</span></span>
<span id=item3>Value #003<span class="clickableitem">xxx</span></span>

JS:

$('.clickableitem').click(function() {
    let text = $(this).parent().text().substring(0, $(this).parent().text().indexOf($(this).text()));

    console.log(text);
});

Answer 3

Replacing the text is unsafe could be resulting in an empty text if the value is the same as xxxx child span....

This aproach is more effective

HTML

<span id='item1'>Value #001<span id='clickableitem1' class='spanClickable'>xxx</span></span>
<span id='item2'>Value #002<span id='clickableitem2' class='spanClickable'>xxx</span></span>
<span id='item3'>Value #003<span id='clickableitem3' class='spanClickable'>xxx</span></span>

JS

$(document).on('click','.spanClickable',function(e){
   alert( $(this).parent().contents().get(0).nodeValue  );
});