jquery scope issue

Question

I am having issue with the following: I can't seem to keep the link I am selecting in each repeated item. The word "this" is getting lost. the Var event_id works for each element, but the var $something is undefined? Why is that, Ideally I wanted to do a switch statement but same issue, can't seem to get it to know what link I click and the elements around it to do the action.

Updated Full Function:

function rsvp (selector,function_url) {
$(selector).livequery('click',function(){

   var $select = $(selector).attr('rel');
   var $event_id= $(this).parents('ul.event-options').attr('rel');
     if ($select == "attending") {
     $(this).closest('span.rsvp-status').html("I'm Attending &ndash; <a href='javascript:;' class='remove' rel='remove'>Remove</a>");
     var $something = $(this).parents('ul.event-options').attr('rel');
     alert($something);
     }
     if ($select == "remove") {
     $(this).closest('span.rsvp-status').html("Not Attending &ndash; <a href='javascript:;' class='rsvp' rel='attending'>RSVP?</a>");
     }
     if ($select == "interested") {
     $(this).closest('li').addClass('interested');
     $(this).closest('li').removeClass('not-interested');
     $(this).closest('li').html("You're Interested");
     }

   $.ajax({
     type: "POST",
     url: "/events/set_member/"+function_url,
     data: "event_id="+$event_id,
     beforeSend:  function() {
     $("<span class='notice'>Updating...</span>").prependTo('body');
       },
     complete: function()
       {
       $('span.notice').fadeOut(500);

       }
     });



   });
}
rsvp ('a.rsvp','rsvp');
rsvp ('a.interests','interested');
rsvp ('a.remove','remove');

HTML

<ul class="event-options" rel="<?=$event['event_id']?>">
         <?php if($event['rsvp_total'] > 0) { ?>
         <!-- Show Only When Count is Greater than 0 -->
         <li class="group"><span class="total"><?= $event['rsvp_total']?></span>Interested </li>
         <?php } ?>

         <li class="rsvp"><span class="rsvp-status"> Not Attending &ndash; <a href="javascript:;" class="rsvp" rel="attending">RSVP?</a></span></li>
         <li class="not-interested"> <a href="javascript:;" class="interests" rel="interested"> Interested? </a> </li>
         <li class="place"><span><a href="<?=$place_path.$event['place_id']?>"><?=$event['place_name']?></a></span></li>
         <li class="share" rel="<?=$event['event_name']?>">
         <a class="sharethis"></a>

         </li>

        </ul>

Answer 1

var $something = $(this).parents('ul.event-options').attr('rel');

Look at your html and make sure that ul.event-options is a parent after you do your .html invocation. It would also help actually providing the html source since this is a question that's entirely dependent on your markup.

This can't really be a scope issue because you aren't going beyond the outer scope and the livequery inner scope.

Answer 2

<li class="rsvp">
   <span class="rsvp-status"> 
      Not Attending &ndash; 
      <a href="javascript:;" class="rsvp" rel="attending">RSVP?</a>
   </span>
</li>

The link that get's clicked is inside the span 'rsvp-status'. So when you replace the innerHTML(by using the .html function of jQuery) of the span in question it will remove the link also. So $(this) won't be pointing to an element anymore after the html invocation.

Answer 3

I was able to solve the issue, and it works.

function rsvpNew(selector,function_url) {
 $(selector).livequery('click',function(){
   var select = $(selector).attr('rel');
   var event_id = $(this).parents('ul.event-options').attr('rel');
   element = this;

   switch(select) {
        case "attending":
        $.ajax({
        type: "POST",
        url: "/events/set_member/"+function_url,
        data: "event_id="+event_id,
        beforeSend:  function() {
        $("<span class='notice'>Saving...</span>").prependTo('body');
                                },
        complete: function() {


                        $('span.notice').fadeOut(500);
                        $(element).closest('span.rsvp-status').html("I'm Attending &ndash; <a href='javascript:;' class='remove' rel='remove'>Remove</a>");
                        }


        });


                 break;