checking an element is clicked not working jquery

Question

I have a dialog box which get list of students from an ajax call and I am loading the data with .html() method of jquery.

I put the html data like this into the dialog box.I want to make each student name clickable.When I click first,the background of selected .student_list_div should be green. If I click again,I should make it background none.If clicked again, the color should be green in order to make the user know that it is selected or not.I have done the jquery method also.But its not working properly.

<a href='' class='student_list' id='studentid1'><div class="student_list_div">
StudentName1</div></a>
<a href='' class='student_list' id='studentid2'><div class="student_list_div">
StudentName2</div></a>
and so on.......

My jquery method is like this.

 $("#dialog_wrapper").on('click','.student_list',function(){
            if($(this).data('clicked'))
            {
               $(this).find('.student_list_div').css('background-color','none'); 
            }
            else
            {
                $(this).click(function(){
                   $(this).data('clicked',true); 
                   $(this).find('.student_list_div').css('background-color','green');
                });
            }


            return false;
        });

Please help me

Why are you binding another click event handler. remove `$(this).click(function(){` — Satpal, Feb 07 '15 at 15:45

score 1 · Answer 1 · answered Feb 07 '15 at 15:46

1

Aside from any other issues, inline elements, like an anchor, cannot contain block elements (like a div).

Instead use <span>s for the inner elements.

answered Feb 07 '15 at 15:46

iCollect.it Ltd

92,391
25
181
202

I have used span,but also background color is not going once it is selected. – Techy Feb 07 '15 at 15:53
You are also connecting a click handler inside a click handler - never a good idea. – iCollect.it Ltd Feb 07 '15 at 15:56
I understood my mistake.Thanks for making me aware.I have upvoted your answer too – Techy Feb 07 '15 at 15:57

Satpal · Answer 2 · 2015-02-07T15:53:57.747

1

You are binding click event handler inside click handler. Remove $(this).click(function(){

Use

 $("#dialog_wrapper").on('click', '.student_list', function() {
    if ($(this).data('clicked')) {
        $(this).find('.student_list_div').css('background-color', '');
    } else {
        $(this).data('clicked', true);
        $(this).find('.student_list_div').css('background-color', 'green');
    }
    return false;
 });

Important: anchor a can't contain div, use span instead

edited Feb 07 '15 at 15:53

answered Feb 07 '15 at 15:46

Satpal

132,252
13
159
168

This is working for first time.That is if it is not anchor tag is not clicked,it will make background green on first click.If I click again,background color is not removing – Techy Feb 07 '15 at 15:50
@Techy, try with `.css('background-color', '')` – Satpal Feb 07 '15 at 15:54
This is also not working.When I added $(this).data('clicked', false); inside the first if condition it worked.Thanks for your help. – Techy Feb 07 '15 at 15:56

score 1 · Accepted Answer · answered Feb 07 '15 at 15:50

You don't need to bind an additional click event handler within your first click event handler. Also I think you aren't changing the clicked property to false if it is true.

 $("#dialog_wrapper").on('click', '.student_list', function() {
   if ($(this).data('clicked')) {
     $(this).find('.student_list_div').css('background-color', 'none');
     $(this).data('clicked', false);
   } else {
     $(this).data('clicked', true);
     $(this).find('.student_list_div').css('background-color', 'green');
   }


   return false;
 });

Also you could achieve the same effect by having a '.clicked' class and using jQuery's toggleClass to toggle it when clicked.

$("#dialog_wrapper").on('click', '.student_list', function() {
  $(this).find('.student_list_div').toggleClass('.clicked')
});

.clicked {
  background-color: green;
}

The second version (toggling a class) is definitely a better option. Note the original HTML was also invalid to begin with (a div is a *block* element so is not valid inside an anchor which is an *inline* element) — iCollect.it Ltd, Feb 07 '15 at 15:59

score 0 · Answer 4 · edited May 23 '17 at 11:43

0

All you need is event binding of dynamically created elements. See this:

Event binding on dynamically created elements?

edited May 23 '17 at 11:43

Community

1
1

answered Feb 07 '15 at 16:05

Vishal

171
7

checking an element is clicked not working jquery

4 Answers4