Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 623
  • Last Modified:

jquery on click handler in an each loop

Dear all,

I don't know why but my on click handler does not work.

It is never triggered.

I also tried with a

$(this).click(

but it was the same.

The loop works fine and the elements are removed.

But I would like to remove only the one element that has been clicked on, not all of them.

// Clear the displayed content
      $(this).find('span.elearning_question_dropped_content').find('.elearning_question_dropped_item').each(function(i, element) {
alert("This alert displays the element fine " + element);
// TODO why the on click does not work?
        $(this).bind(
          "click",
          function() {
alert('This alert is never displayed... why..?');
alert('clicked on id ' + element.attr('id'));
        });
        $(this).html('');
        $(this).remove();
      });

Open in new window

0
stephaneeybert
Asked:
stephaneeybert
  • 4
  • 2
1 Solution
 
Albert Van HalenAnalyst developerCommented:
You're binding a function to the click event of the element in the foreach loop (it doesn't get triggered) and after that the element is removed.

In order to trigger an event you have to use the trigger or triggerHandler method.
Just move the remove method into your function bound to the click event.

See code
// Clear the displayed content
      $(this).find('span.elearning_question_dropped_content').find('.elearning_question_dropped_item').each(function(i, element) {
    $(this).bind("click", function() {
        $(this).remove();
    });
});

Open in new window

0
 
stephaneeybertAuthor Commented:
Hi Albert,

Here is how I did:
      $(this).find('span.elearning_question_dropped_content').find('.elearning_question_dropped_item').each(function(i, element) {
        $(this).bind(
          "click",
          function() {
          $(this).html('');
          $(this).remove();
        });
      });

And it works fine.

But I don't know why it now works and not before.

Why the alert was not triggered before ?

Thanks
0
 
Albert Van HalenAnalyst developerCommented:
Hey Stephane

You're looping through all elements with class elearning_question_dropped_item.
Each element will have it's click event bound to a funtion but the element gets deleted in the same loop.
Since it gets deleted you can't click it hence the alert won't be displayed.

NB
Do you see the difference in my and your solution? Exactly the same but you're clearing the contents first which is not realy needed because it gets removed.
You can simply remove the element.
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
stephaneeybertAuthor Commented:
The first click does not delete the element.

It seems like the first click gets the focus.

Then fron the second click on the clicks do delete the elements.

How to fix this so as to have the first click delete the clicked element ?
0
 
stephaneeybertAuthor Commented:
Okay, I will remove the clearing of content.

Thanks for the explanation.
0
 
stephaneeybertAuthor Commented:
Hi Albert, sorry for the delay, I'm on holidays in Egypt..

If you happen to have a clue about the focus issue I mentioned feel free :-)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now