CODEWITHSUNDEEP
javascriptjquery
fscore
fscore

Reputation: 2619

Unable to detect what div is clicked

I want every li tag to show the a's clicked href content below that li tag in a div. For example, I have a structure like this:

<ul id="ids">
<li class="res"><a class="item">item1</a></li>
<li class="res"><a class="item">item2</a></li>
<li class="res"><a class="item">item3</a></li>
</ul>

Dynamically if a's href is clicked, accordingly a function that shows the div <div class="testing"><h3>showing item1 here</h3></div> outside the <a> tag needs to be shown. That function could take time so until then Loading... needs to be shown. But I am unable to detect where the user has clicked as class names are the same. Once loading is done, loading should be hidden.

So far I have this:

$(document).on('click', '.item', function(e) {
  e.preventDefault();
$(this).append('Loading');

//function code here

$(this).append('<div class="testing"><h3>showing item1 here</h3></div>');
});

Also, the function appends 1 div tag with class 'mydiv', that needs to be hidden. But again, since class names that get appended to every <li> is the same, I don't know where the click has taken place to detect it.

to summarise:

Upvotes: 0

Views: 86

Answers (2)

MinusFour
MinusFour

Reputation: 14423

You are looking for $.after() or $.insertAfter():

$(document).on('click', '.item', function(e) {
  e.preventDefault();
  var aTag = $(this);
  if (aTag.siblings('.testing, .loader').length === 0) { //it's not loaded or loading
    var loader = $('<div class="loader">Loading</div>');
    loader.insertAfter(aTag);
    //function code here

    loader.remove();
    aTag.after('<div class="testing"><h3>showing ' + aTag.html() + ' here</h3></div>');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ids">
  <li class="res"><a class="item">item1</a>
  </li>
  <li class="res"><a class="item">item2</a>
  </li>
  <li class="res"><a class="item">item3</a>
  </li>
</ul>

If you want to avoid multiple loadings check if it exists before:

if(aTag.siblings('.testing, .loader').length === 0){ //it's not loaded or loading

}

Upvotes: 1

Robbert
Robbert

Reputation: 6592

You can get the href attribute using `$(this). This should work. 

$(document).on('click', '.item', function(e) {
  e.preventDefault();
  var href = $(this).attr("href");
  $(this).append('Loading');
  $(this).append('<div class="testing"><h3>showing ' + href + ' here</h3></div>');
});

Also, the code above will append the div inside the a tag. You probably want to put it somewhere else using something like

 $("#messageDiv").html('<div class="testing"><h3>showing ' + href + ' here</h3></div>');

To hide the loading message, you can wrap that in a span

 $(this).append('<span class="loadingspan">Loading</span>');

Then in the code that runs when the load is complete, you can use

$('.loadingspan').hide();

Upvotes: 0

Related Questions