title: JQuery - where to add .on()/.live() to function?
body: <pre><code>var refreshId = setInterval(function() {
      $('#livelist').load('/scripts/livelist.php', { guestlist:'&lt;?php echo $_GET['guestlist']; ?&gt;'});
  }, 5000);
  $.ajaxSetup({ cache: false });
  </code></pre>
  
  <p>I know I need to attach the .live() event handler to prevent the function from triggering other events (what's currently happening), but where do I add it?</p>
  
  <p><strong>Full Script:</strong></p>
  
  <pre><code>$(document).ready(function() {
  
  $("input#name").select().focus();
  
  $('#livelist').load('/scripts/livelist.php', { guestlist:'&lt;?php echo $_GET['guestlist']; ?&gt;'});
  
  var refreshId = setInterval(function() {
      $('#livelist').load('/scripts/livelist.php', { guestlist:'&lt;?php echo $_GET['guestlist']; ?&gt;'});
  }, 5000);
  $.ajaxSetup({ cache: false });
  
  $("input#name").swearFilter({words:'bob, dan', mask:"!", sensor:"normal"}); 
  
  var tagCheckRE = new RegExp("(\\w+)(\\s+)(\\w+)");
  
  jQuery.validator.addMethod("tagcheck", function(value, element) { 
      return tagCheckRE.test(value);
  }, "");
  
  $("#addname").validate({
      invalidHandler: function(form, validator) { 
        var errors = validator.numberOfInvalids();
        if (errors) {
          $('#naughty').fadeIn('fast');
          $('#naughty').delay('1000').fadeOut('fast');
        } else {
          $('#naughty').hide();
        }
      }
  });
  
  $('#showall').live('click', function() {
      $('#showall').hide();
      $('div#shownames').slideDown('fast');
  });
  
  jQuery(document).ajaxStart(function(){
      $("input#name").blur();
      $('#working').show();
      $('#event-box').fadeTo('fast', 0.5);
  })
  
  var names = '';
  var dot = '.';
  
  $('#addname').ajaxForm(function() {
  
      var options = {
  
              success: function(html) {
                      /* $("#showdata").replaceWith($('#showdata', $(html))) */
                      var value = $("input#name").val().toUpperCase();;
                       $("span.success").text(value);
                       if (names == '') {
                          names = value;
                       }
                       else {
                          names = ' ' + value + ', ' + names;
                          $("span#dot").text(dot);
                       }
                       $("span#name1").text(names);
                      $('#working').fadeOut('fast');
                      $('#success').fadeIn('fast');
                      $('#added-names').fadeIn('fast');
                      $('#success').delay('600').fadeOut('fast');
                      $("input#name").delay('1200').select().focus();
                      $('#event-box').delay('600').fadeTo('fast', 1.0);
                      $(':input','#addname')
                          .not(':button, :submit, :reset, :hidden')
                          .val('')
              },
              cache: true,
              error: function(x, t, m) {
                  if(t==="timeout") {
                      $('#working').fadeOut('fast');
                      $('#fail').fadeIn('fast');
                      $('#fail').delay('600').fadeOut('fast');
                  } else {
                      $('#working').fadeOut('fast');
                      $('#fail').fadeIn('fast');
                      $('#fail').delay('600').fadeOut('fast');
                      alert(t);
                  }
              }
      }
  
      $(this).ajaxSubmit(options);
      $('body').select().focus();
  }); 
  
     $("input").bind("keydown", function(event) {
        var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
        if (keycode == 13) {
               document.getElementById('#submit').click();
               return false;
        } else  {
           return true;
        }
     });
  
  });
  </code></pre>
  
  <p>The ajaxForm function is being triggered using my current implementation.</p>