Question

Here’s my function:

function confirmFamilyMemDelete()
{
  $('#dialog').attr('title', 'Warning').text('Are you sure?').dialog({ buttons:
  [{
    text: 'Yes',
    click: function ()
    {
        $('#MainContent_cph_btnConfirmDelete').click();
        $(this).dialog('close');
        alert('Hello');
    }
},
{
    text: 'No',
    click: function ()
    {
        $(this).dialog('close');
    }
 }
 ]
  });

  return false;
}

I’ve got a very weird problem. In my aspx page there’s a button that gets an id ‘MainContent_cph_btnConfirmDelete’ after it gets rendered. I want to click it if Yes button is clicked in the jQuery UI dialog. However, I fail to do it. It just skips over that command and alerts ‘Hello’. This means the rest of the code inside my Yes button gets executed. And if I take

 $('#MainContent_cph_btnConfirmDelete').click(); 

out and put it just before return false; the button gets clicked. Is this a know issue with jQuery because I can’t think of any logical explanation. If so, what is the workaround?

Answer 1

Here is what I think you need:

function confirmFamilyMemDelete()
{
  $('#dialog').attr('title', 'Warning').text('Are you sure?').dialog({ buttons:
  {
    "Yes": function ()
    {
        $('#MainContent_cph_btnConfirmDelete').trigger('click');
        $(this).dialog('close');
        alert('Hello');
    },
    "No": function ()
    {
        $(this).dialog('close');
    }
 }
  });
  return false;
}