JQuery List Events

Question

Hi,

At the moment I'm building a list using the following code:

$('<li id="li' + jJob.Id + '"><div style="width: 98%; background-color: #9E7BFF; colour: #000000"><a href="javascript:void(0);">' + jJob.Type + ' ' + jJob.AddressClean + ' (' + jJob.Status + ')' + '</a></div></li>').click(function(e) { ShowStatus('job ' + jJob.Id + ' is available'); UnassignJob(jJob.Id); $(this).remove(); }).bind("contextmenu", function(e) { alert('li' + jJob.Id); return false; }).appendTo('#assignmentList');

This works as previously required. However I need to be able to add another a link which will show another menu allowing various options. The problem is that I've attached the click event to the div. How can I attach it only to the a link?

• Create li
• Create div
• Create a link with click event
• Create another a link click event
• Append li to #assignmentList

Mark

Answer 1

You want to append your onclick event to your <a> link inside the li correct?

One option would be to remove the

.click(function(e) { ShowStatus('job ' + jJob.Id + ' is available'); UnassignJob(jJob.Id); $(this).remove(); })

And instead place this in your link, e.g.

'<a href="javascript:NewClickEvent(' + jJob.Id + ')"> stuff </a>'

Where NewClickEvent is defined as

function NewClickEvent(jobID)
{
ShowStatus('job ' + jobID + ' is available'); 
UnassignJob(jobID); $(this).remove();
}

Note- you may have to fiddle this a bit to get $(this) to work as it did previously... not sure what object it will bring back currently.

You could use either the href attribute as shown, or add an onclick attribute to the link.

Hopefully this should give you at least some inspiration :)