Question

var refreshId = setInterval(function() {
    $('#livelist').load('/scripts/livelist.php', { guestlist:'<?php echo $_GET['guestlist']; ?>'});
}, 5000);
$.ajaxSetup({ cache: false });

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?

Full Script:

$(document).ready(function() {

$("input#name").select().focus();

$('#livelist').load('/scripts/livelist.php', { guestlist:'<?php echo $_GET['guestlist']; ?>'});

var refreshId = setInterval(function() {
    $('#livelist').load('/scripts/livelist.php', { guestlist:'<?php echo $_GET['guestlist']; ?>'});
}, 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;
      }
   });

});

The ajaxForm function is being triggered using my current implementation.

Answer 1

The fault:

jQuery(document).ajaxStart(function(){
    $("input#name").blur();
    $('#working').show();
    $('#event-box').fadeTo('fast', 0.5);
})

As .ajaxStart() is a global parameter, it was being triggered during every AJAX call, including .load(), I’m surprised no one spotted it.