Question

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 the 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?

Answer 1

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.