Question

I am writing a page that grabs images from a url the user inputs, and using ajax, am updating a div with the img src to be displayed by fancybox in a modal window. The images that are displayed have titles displayed below, as links. This is done with fancybox (If you set the title as set the title="something" will display “something” below the image. If you set the title as title="<a href='something.html'>Something</a>)

My problem is this. I need to allow the user to choose an image by clicking the link, and in turn have it do 2 things: update the hidden field with the src url of the img, and submit the form.

Here is the code I have for the ajax request:

    function getCustomerInfo() {
        var phone = document.getElementById("urls").value;
        var url = "grabimages.php?urls=" + escape(phone);
        request.open("GET", url, true);
        request.onreadystatechange = updatePage;
        request.send(null);
        $("#dvloader").show();
        $("#selectimages").hide();
        //$("#noimages").hide();

        function updatePage() {
        if (request.readyState == 4)
            if (request.status == 200){
                if(request.responseText == ''){
                    $("#dvloader").hide();
                    $("#noimages").show();
                }else{
                    document.getElementById("update-div").innerHTML = request.responseText;
                    $("#dvloader").hide();
                    $("#selectimages").show();
                    $(".fancybox")
                        .attr('rel', 'gallery')
                        .fancybox({
                            padding : 15
                        });
                    $('input[id=theimage]').click(function(){

                        $(".fancybox").eq(0).trigger('click');
                    }); 


                    function recURL(recipeurl) {

                        $('#recipeurl').val('recipeurl');
                        document.recipeform.submit();


                    }

                }
            }else{
                alert('nothing');
            }

        }

And here is the code I tried for the href javascript call (this is the server side code, so PHP:

    echo "<a class=\"fancybox\" id=\"recipelinks\" title=\"<a href='#' onclick='javascript:recURL(" . $imagepath . ");'>Choose this Image</a>\" href=\"" . $imagepath . "\"><img src=\"" . $imagepath . "\" alt=\"\"/></a>";

This doesn’t do anything. Any suggestions?

Answer 1

Use $('.fancybody').live('click', function() { });, live allows you to listen for events on elements which are added to the DOM dynamically.