Solved

jquery on click handler in an each loop

Posted on 2009-03-30
6
607 Views
Last Modified: 2012-05-06
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
Comment
Question by:stephaneeybert
  • 4
  • 2
6 Comments
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 24017730
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
 

Author Comment

by:stephaneeybert
ID: 24023706
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
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 50 total points
ID: 24023815
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
Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

 

Author Comment

by:stephaneeybert
ID: 24023816
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
 

Author Comment

by:stephaneeybert
ID: 24023834
Okay, I will remove the clearing of content.

Thanks for the explanation.
0
 

Author Closing Comment

by:stephaneeybert
ID: 31564233
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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

by Julian Matz As of jQuery (http://jquery.com/) 1.4 the .live() method (http://api.jquery.com/live/) supports custom events as well as some standard JavaScript events that it previously didn't support. Among these is the submit event. Unlike …
Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question