Question

I have an ASP.NET MVC 3.0 partial view which is render inside a jquery ui dialog.
Inside this partial view I have some link which help me to display some more info.

@foreach (StatusType status in ViewBag.Status)
{
    <li>@status.StatusMessage<a href='#' status='@status.StatusCode'><img src=@Url.Content("~/Content/Images/information.png") alt="See detail"/></a></li>
}

I’ve bound those link with the click event:

$('a[status]').live('click', function (e) {
            if (e.preventDefault)
                e.preventDefault();
            else
                e.returnValue = false;
            var status = $(this).attr('status');
            alert('@Model.Code');
            ...});

What is happening is when I click the first time on the link it will display me the correct Code (let’s say 12). When I will load the partial view again for another code (66) it will display me two alert message, the first one with 12 (the old value I’ve clicked before) and the second one with 66.

The more partial view I will load the more value I will have in my alert.
I don’t understand why it is keeping me like an history of all the code I’ve clicked.

If somebody have any idea on this problem, it will be welcomed, it just driving me mad.

Thanks in advance.

UPDATED

The use of the on instead of the live works, but I still have an issue with the dialog.
I’ve change the code with the solution proposed:

            $('#StatusDiv').on('click', 'a[status]', function (e) {
            e.preventDefault();
            var status = $(this).attr('status');
            alert('@Model.Code');
            $('#StatusDialog').dialog({
                autoOpen: false,
                width: 800,
                resizable: true,
                title: 'Status Info',
                modal: true,
                open: function (event, ui) {
                    alert('@Model.Code');
                    $(this).load('@Url.Action("ViewStatusInfo")', { clientId: clientId, Code: '@Model.Code', status: status
                    });
                }
            });
            $('#StatusDialog').dialog('open');
        }); 

The first alert display the correct code, but the second alert inside the open function display the old one. On the second click it will work correctly but I don’t understand how it can pick the old value since the first display is correct…

Thanks again for your help.

Answer 1

First of all: do not use live in last versions of jquery.

$('#list').on('click', '.status', function(e){
    e.preventDefault();
    alert(this.href);
});

Here we bind event to #list and when we will insert new links, everything will work.

Demo: jsfiddle.net/wPSH2/