Jquery inside Ajax returned data doesnt execute

I have a page on my site that uses jquery. In the jquery script there are onclick events using css classes, also I use a jquery ajax call to get data from my database and then return the results and load the results via ajax on my page on the site. Within the results returned by the ajax call are the css classes that have the onclick event setup in my jquery script. My issue is none of the onclick events work when I return the results via ajax, if I dont use ajax and just load t开发者_StackOverflow中文版he results via the page itself then the onclick events work. Is there a way to have the jquery onclick events work inside data returned by an ajax call?

$('#myformsubmit').click(function(){
    var dataString = $('#myform').serialize();
    $.ajax({
        type:"POST",
        url:"/ajax/formaction/process.php",
        data:dataString,
        success: function(data) {
            var formdata = $.parseJSON(data);

            $('#myformsg').html(formdata.formmsg);
            $('html, body').animate({ scrollTop:0 }, '1000');

            if(formdata.status == 'success')
            {

                $('#myform')[0].reset();

            }
        }
    });
    return false;
});

Then I have this code for the click event:

$('.selectoption').click(function(){
    var optionurl = $(this).attr('alt');
    window.location = '/option/view/' + optionurl;
    return false;
});

Inside the results from the ajax call the selectoption class is associated with a button, when I click it nothing happens. When I load the results via the page directly it works just fine. Any suggestions?

I'm not totally clear about what you're doing, but you could try using 'live' -

$('.selectoption').live('click',function(){
    var optionurl = $(this).attr('alt');
    window.location = '/option/view/' + optionurl;
    return false;
});

That will assign the click event to all the '.selectoption' classes including those that are created dynamically.

I'm not clear but I guess that you have updated your page via ajax and the element (selectoption class) came from server and dynamically has been inserted in to the dom. If so then you should definitely use the jQuery.live() method, because definitely(via ajax) inserted elements are not bound to the click event that you have declared in the document.ready event. So it should be-

$('.selectoption').live('click', function() {
   var optionurl = $(this).attr('alt');
   window.location = '/option/view/' + optionurl;
   return false;
});

You need to use jQuery.live()

$('.selectoption').live('click', function() {
    var optionurl = $(this).attr('alt');
    window.location = '/option/view/' + optionurl;
    return false;
});

My spin on it:

$('.parent').delegate('.selectoption', 'click', function(event) {
  event.preventDefault();
  var optionurl = $(this).attr('alt');
  window.location = '/option/view/' + optionurl;
});

Where ".parent" is just some selector I made up. You will need to substitute this with some element on your page that will always contain your .selectoption but will never be destroyed by dom manipulation. Could be your '#myform' I believe. If not, a wrapper div, and if you're desperate it could just be 'body'.

I assume from your "return false" that you want to prevent default behaviour. In my example I do this with preventDefault() instead.