I have a simple ajax load which brings in an external form - at the
moment it's just a simple input box with 2 buttons, a "save" and
"cancel", however whenever I press any input button within the called
form JQuery just doesn't seem to recognise it.

Loading my external HTML form, and pressing on its input buttons
should produce an alert message, but instead just goes to the page.

How do I make jQuery recognise the form, add it to the DOM and work
with it?

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
<head>
    <title>Basic test</title>
    <meta http-equiv="Content-type" content="text/html;
charset=utf-8" />
        <script type="text/javascript">
                /* <![CDATA[ */
                        $(document).ready(function() {

                                // default the div to be hidden and empty.
                                $("#detail").hide().empty();

                                // this loads an external file, and fades it 
into view.
                                $(".box a").click(function(event){
                                        event.preventDefault;

                                        var href = $(this).attr('href');
                                        
$("#detail").fadeIn(500).addClass("editbox");
                                        $("#detail").load(href);

                                        return false;
                                });

                                // this will produce an alert message whenever 
you press
                                // on any input button.
                                $("input").click(function(event){
                                        event.preventDefault;
                                        alert("cancel");
                                        return false;
                                });

                        });
                /* ]]> */
        </script>

<body>

<p class="box">
        <a href="editor.htm">Show External Form in Detail Div</a>
</p>

<div id="detail"></div>

<form action="#" method="post">
                <input type="submit" value="Save" />
                <input type="button" id="cancel" value="Cancel" />
</form>


</body>
</html>
[/code]

Okay, and now my external form,

[code]
<form name="editorForm" id="editorForm" method="post" action="#">

        <p>
                <label for="item">Item: <br />
                        <input type="text" id="item" name="item" value="" />
                </label>
        </p>

        <p>
                <input type="submit" value="Save" />
                <input type="button" id="cancel" value="Cancel" />
        </p>
</form>
[/code]


All I want is this;

1. Press on link to grab an external HTML file and load into a div
2. Jquery recognises the external forms input buttons.

How do I best accomplish this?

Reply via email to