title: jsPlumb trigger an event when a connection is made and rename connection (con_)
body: <p>Using <a href="http://jsplumbtoolkit.com/demo/home/dom.html" rel="nofollow">jsPlumb</a>, I want to make an alert pop up when a connection is made - that is when a user clicks and drags from one <code>.task</code> div to another (making a jsPlumb connection).</p>
  
  <p><a href="http://jsfiddle.net/uQdfq/" rel="nofollow">http://jsfiddle.net/uQdfq/</a>
  <em><br />( drag from</em> <code>task1</code> <em>to</em> <code>task3</code> <em>)</em></p>
  
  <p>What is the best approach for this if I declare the <code>.task</code> div a source/target when it is defined?</p>
  
  <pre><code>addTask($('#project1'), 'task' + 1);
  </code></pre>
  
  <p>Function itself:</p>
  
  <pre><code>// Adds a task div to the specific project
  function addTask(parentId, id) {
    var newState = $('&lt;div&gt;').attr('id', id).addClass('task')
  
    // A title for the task
    var title = $('&lt;div&gt;').addClass('title').text(id);
    newState.append(title);
  
    $(parentId).append(newState);
  
    // Makes the task div a possible target (i.e. connection can be dragged to)
    jsPlumb.makeTarget(newState, {
      anchor: 'Continuous'
    });
  
    // Makes the task div a possible source (i.e. connection can be dragged from)
    jsPlumb.makeSource(newState, {
      anchor: 'Continuous'
    });
  }
  </code></pre>
  
  <p>As a bigger picture I'm trying to find a way to name the <code>connection.id</code> my own way (using GUIDs). That is, I want to name the connections something like <code>con_1238519b-3e11-4788-9ac4-fe5f244fbb55</code></p>
  
  <p>With jsPlumb all connections <code>jsPlumb.getConnections()</code> have the naming convention of <code>con_40</code>, <code>con_12</code>, ..., <code>con_105</code></p>