Reinitialising document ready function

JavaScript
1

Hello,

I have some event listeners in my document ready function and I make some items dragable with jqeury and jquery ui. See below part of my code. Most is copied from example jquery ui.

$(function() {
	$("#ingeplandP li").draggable({
		cancel: "a.ui-icon", // clicking an icon won't initiate dragging
		revert: "invalid", // when not dropped, the item will revert back to its initial position
		helper: "clone",
		cursor: "move"
	});
	$( "#ingeplandP li").click(function( event ) {
		var $item = $( this ),
			$target = $( event.target );

		if ( $target.is( "a.ui-icon-trash" ) ) {
			deleteImage( $item );
		} else if ( $target.is( "a.ui-icon-refresh" ) ) {
			recycleImage( $item );
		}

		return false;
	});
        $("#startProject").change(testFunc);
	$("#endProject").change(testFunc);
});

The testFunc is a simple function which executes a load

function testFunc()
{
	var start = $("#startProject");
	var end = $("#endProject");
	if(start.val() && end.val())
	{
		$('#beschikbaarP').load('includes/php/helpers/loadBeschikbaarP.php);
	}
}

After the load has completed the inserted items have lost their listener and their dragability. I can make them dragable again and add the listeners manually, but that means I would have the first code parts two times. This is not good I guess. So I would like to know if somebody know off a way to initialise my code in my first code block again after the load has completed.

I have looked around, but can’t seem to find what I look for. Maybe I use the wrong terms.

2

I had a smart moment and got a solution. Don’t know if it is correct to do it like this, but it works. I didn’t really use much javascript before.

I put a wrapper around my code that needs to be initialised.

$(function() {
	loadReady();
});

function loadReady()
{
        $("#ingeplandP li").draggable({
		cancel: "a.ui-icon", // clicking an icon won't initiate dragging
		revert: "invalid", // when not dropped, the item will revert back to its initial position
		helper: "clone",
		cursor: "move"
	});
	$( "#ingeplandP li").click(function( event ) {
		var $item = $( this ),
			$target = $( event.target );

		if ( $target.is( "a.ui-icon-trash" ) ) {
			deleteImage( $item );
		} else if ( $target.is( "a.ui-icon-refresh" ) ) {
			recycleImage( $item );
		}

		return false;
	});
        $("#startProject").change(testFunc);
	$("#endProject").change(testFunc);
}

And modified my testFunc

function testFunc()
{
	var start = $("#startProject");
	var end = $("#endProject");
	if(start.val() && end.val())
	{
		$('#beschikbaarP').load('includes/php/helpers/loadBeschikbaarP.php', loadReadyFunction);
	}
}

Is this good practise?