CODEWITHSUNDEEP
functionvariablesclickjquery
Sebastian Rush
Sebastian Rush

Reputation: 538

jquery function in function variable not recognized

I have this two functions (function in function) but the second one is not firing because it seems that indxc can not catch the id from the parent function.

$(".guddi").live('click',function(){
    $("#licolor").show();
    var indx = $(this).attr("id");
    if (indx < 0) {
    $('#color').css('display','none');
    return;
    }
    var item = '<div class="fn_menu_title pointer risch"><span>Choose color</span></div><ul class="fn_menu">';
    for (g=0; g < menu[indx].color.length; g++){
    item += '<li><span class="pointer search_link" searchkey="'+ leString +' xdz'+ menu[indx].wert + ' xdz'+ menu[indx].color[g].farbe +'" id="'+[g]+'">' + menu[indx].color[g].farbe + '</span></li>';
    }

    $("#color").html(item+'</ul>').fadeIn();
    $("#color").menuFlip();

    $(".risch").live('click',function(){
        $("#liqual").show();
        var indxc = $(this).attr("id");
        if (indxc < 0) {
        $('#qual').css('display','none');
        return;
        }
        var item2 = '<div class="fn_menu_title pointer"><span>Choose quality</span></div><ul class="fn_menu">';
        for (i=0; i < menu[indx].color[indxc].quality.length; i++){
        item2 += '<li><span class="pointer search_link" searchkey="'+ leString +' xdz'+ menu[indx].color[indxc].quality[i].wert +'">' + menu[indx].color[indxc].quality[i].wert + '</span></li>';
        }

        $("#qual").html(item2+'</ul>').fadeIn();
        $("#qual").menuFlip();
    });
});

Upvotes: 0

Views: 109

Answers (4)

bipen
bipen

Reputation: 36541

just remove the click function from inside a function and write it outside and that should work..live is deprecated so I am using on..

problem in yours was.. you had click event inside click event.. so to fire .risch click event you had to click to .guddi which in turn is not possible since you cannot have two clicks at once... keeping it separately.. now document can find each click event and fire it correspondingly... so it works

$(".guddi").on('click',function(){
  $("#licolor").show();
  var indx = $(this).attr("id");
  if (indx < 0) {
   $('#color').css('display','none');
   return;
  }
  var item = '<div class="fn_menu_title pointer risch"><span>Choose color</span></div><ul class="fn_menu">';
  for (g=0; g < menu[indx].color.length; g++){
     item += '<li><span class="pointer search_link" searchkey="'+ leString +' xdz'+ menu[indx].wert + ' xdz'+ menu[indx].color[g].farbe +'" id="'+[g]+'">' + menu[indx].color[g].farbe + '</span></li>';
  }

  $("#color").html(item+'</ul>').fadeIn();
  $("#color").menuFlip();
});

$(".risch").on('click',function(){
    $("#liqual").show();
    var indxc = $(this).attr("id");
    if (indxc < 0) {
      $('#qual').css('display','none');
      return;
    }
    var item2 = '<div class="fn_menu_title pointer"><span>Choose quality</span></div><ul class="fn_menu">';
    for (i=0; i < menu[indx].color[indxc].quality.length; i++){
       item2 += '<li><span class="pointer search_link" searchkey="'+ leString +' xdz'+ menu[indx].color[indxc].quality[i].wert +'">' + menu[indx].color[indxc].quality[i].wert + '</span></li>';
    }

    $("#qual").html(item2+'</ul>').fadeIn();
    $("#qual").menuFlip();
 });

Upvotes: 0

Sebastian Rush
Sebastian Rush

Reputation: 538

I found my mistake. thank you @Devang Rathod...this was the master-hint :)

var item = '<div class="fn_menu_title pointer risch"><span>Choose color</span></div><ul class="fn_menu">';
 for (g=0; g < menu[indx].color.length; g++){
 item += '<li><span class="pointer search_link" searchkey="'+ leString +' xdz'+ menu[indx].wert + ' xdz'+ menu[indx].color[g].farbe +'" id="'+[g]+'">' + menu[indx].color[g].farbe + '</span></li>';

}

changed to this

var item = '<div class="fn_menu_title pointer"><span>Choose color</span></div><ul class="fn_menu">';
  for (g=0; g < menu[indx].color.length; g++){
     item += '<li><span class="pointer search_link risch" searchkey="'+ leString +' xdz'+ menu[indx].wert + ' xdz'+ menu[indx].color[g].farbe +'" id="'+[g]+'">' + menu[indx].color[g].farbe + '</span></li>';
  }

the .risch was in the wrong HTML element

Upvotes: 0

Devang Rathod
Devang Rathod

Reputation: 6726

live() is depreciated in Jquery , so you can use on() instead, e.g.

and also try to alert inside second function.

$(".risch").on('click',function(){
   alert($(this).attr("id"));
});

Upvotes: 2

Jai
Jai

Reputation: 74738

You can do in this fashion:

$(document).on('click', ".guddi", function(){
   // all the stuff but not the second elem clik event
});

put this outside and do this way:

$(document).on('click', ".risch", function(){
   // all stuff related to this event.
});

You need an event delegation to the closest existing parent. In you code it is hard to get so that's why i delegated to document it self because this is the parent of all elems in the page.

Upvotes: 1

Related Questions