CODEWITHSUNDEEP
javascripthtmljquery
twan
twan

Reputation: 2659

How to use a click event inside a click event jquery

I have a list which is generated so it can contain any amount of questions.

There are always three answers, "OK", "Fout" and "N.v.t."

When fout is selected (fout means wrong in dutch) a dropdown appears where additional info and an image can be added.

I made the same for OK which worked, but now I want to only show that dropdown when a plus icon is clicked. This icon only appears after a user answers a question with OK.

You can see it here: https://jsfiddle.net/6pxjskr5/

How can I do that? My guess is a click event inside a click event but I don't know if that is possible.

I tried the following:

$(document).on('click', '[id^=radio]', function(){
  var userresp = this.value;
  var fout_id = $(this).attr('id');
  var index = fout_id.split('-')[1];
  if (userresp == 'ok') index= parseInt(index)+ 1;
  if (userresp == 'fout') index= parseInt(index)+ 0;
  if (userresp == 'nvt') index= parseInt(index)- 1;
  // The container for the additional negative info (FOUT)
  var afw_id = 'afw-div-' + index;
  // The container for the additional positive info (OK)
  var pos_id = 'pos-div-' + index;
  // The plus icon
  var plus_id = 'plus-div-' + index;
    console.log('radio clicked', userresp, index);
    if (userresp=='fout') {
        $('#' + afw_id).slideDown();
        $('#' + pos_id).slideUp();
        $('#' + plus_id).hide();
    }
    else if(userresp=='ok'){
        $('#' + afw_id).slideUp();
        $('#' + plus_id).show();

        $(document).on('click', plus_id, function(){
          console.log('test');
        });
    }else{
        $('#' + plus_id).hide();
        $('#' + afw_id).slideUp();
        $('#' + pos_id).slideUp();
    }
});

But there is no test message in my console when clicking on the plus icon.

Upvotes: 0

Views: 25

Answers (1)

seymar
seymar

Reputation: 4063

Your selector plus_id equals for example plus-div-123. But you intend to select by ID so it should be prefixed with a #. So it becomes: #plus-div-123.

Upvotes: 1

Related Questions