Was using .bind but now haved to use .delegate… ha

Question

Heres the jsfiddle, jsfiddle.net/kqreJ

So I was using .bind no problem for this function but then I loaded more updates to the page and found out that .bind doesn't work for content imported to the page but just for content already on the page! Great!

So I switched it up to .delegate which is pretty cool but now I can't figure out how to .bind .unbind my function the way it was???

Function using .bind which worked perfect... except didn't work on ajax content.. :(

$('.open').bind("mouseup",function(event) {
var $this = $(this), handler = arguments.callee;
$this.unbind('mouseup', handler);
var id = $(this).attr("id");
var create = 'nope';

    var regex = /\d+$/,
    statusId = $('#maindiv .open').toArray().map(function(e){
        return parseInt(e.id.match(regex));
    });

var divsToCreate = [ parseInt(id) ];

$.each(divsToCreate, function(i,e)
{
    if ( $.inArray(e, statusId) == -1 ) {
        create = 'yup';
    }
});

        if( create == 'yup' ) {
            if(id) {
                    $.ajax({
                    type: "POST",
                    url: "../includes/open.php",
                    data: "post="+ id,
                    cache: false,
                    success: function(html) {
                    $('.open').html(html);
                    $this.click(handler);
                    }
                    });
            }
        }

});

New function using .delegate that is not binded and creates multiple instances?

$('#maindiv').delegate("span.open", "mouseup",function(event) {
var $this = $(this), handler = arguments.callee;
$this.unbind('mouseup', handler);
var id = $(this).attr("id");
var create = 'nope';

    var regex = /\d+$/,
    statusId = $('#maindiv .open').toArray().map(function(e){
        return parseInt(e.id.match(regex));
    });

var divsToCreate = [ parseInt(id) ];

$.each(divsToCreate, function(i,e)
{
    if ( $.inArray(e, statusId) == -1 ) {
        create = 'yup';
    }
});

        if( create == 'yup' ) {
            if(id) {
                    $.ajax({
                    type: "POST",
                    url: "../includes/open.php",
                    data: "post="+ id,
                    cache: false,
                    success: function(html) {
                    $('.open').html(html);
                    $this.click(handler);
                    }
                    });
            }
        }

});

I've spent hours trying to figure this out because I like learning how to do it myself but I had to break down and ask for help... getting frustrated!

I also read that when your binding and unbinding .delegate you have to put it above the ajax content? I've tried using .die() and .undelegate()... Maybe I just don't know where to place it?

Answer 1

Take a look at undelegate

It does to delegate what unbind does to bind.

In your case, I think it'd be something like:

$('#maindiv').undelegate("span.open", "mouseup").delegate("span.open", "mouseup" ...

Then you can drop the $this.unbind('mouseup', handler); within the function.