HTML

Question

我有一个页面，其中包含项目列表，其中我使用Ajax根据数据ID成功加载表单。

表单本身是基于Ajax的，它提交并验证提交而不重新加载页面，而是使用Ajax本身提交数据（测试并在正常页面设置上工作）。

我得到了这么远，但是表单上的Ajax无法为我工作，我尝试过几个东西，包括委托等。表单通常没有Ajax到新页面。

任何人都可以引导我朝着正确的方向前进，JQuery似乎是我的弱点，或者我可能离解决方案太远了。

HTML

<ul id="myList">
    <li>
        <h3>test</h3>
        <p>Some text</p>
        <a href="job-contact.php?id_job=1" class="related" data-id="1" rel="nofollow">Apply Now</a>
        <div id="jobForm1"></div>
    </li>
</ul>

的Javascript

$(document).ready(function() {

    $('#contactform').submit(function() {

        var action = $(this).attr('action');
        var values = $(this).serialize();

        $('#submit').attr('disabled', 'disabled').after('<img src="assets/img/ajax-loader.gif" class="loader" />');

        $("#message").slideUp(750, function() {

            $('#message').hide();

            $.post(action, values, function(data) {
                $('#message').html(data);
                $('#message').slideDown('slow');
                $('#contactform img.loader').fadeOut('fast', function() {
                    $(this).remove()
                });
                $('#submit').removeAttr('disabled');
                if (data.match('success') != null) $('#contactform').slideUp('slow');

            });

        });

        return false;

    });
    //end form //

    //load related content loads form on page //
    $( 'a.related' ).bind( 'click', function( e ) {  // bind the event to the element identifier // 
        var url = $( this ).attr( 'href' ); // define the anchor variable //
        var id = $( this ).attr( 'data-id' );  // define the data-id containing the record id //
        $( '#jobForm' + id ).load( url ).hide().fadeIn('slow'); // append the data id and load the content in the container div //
        e.preventDefault(); // stop browser loading new page //

        //tried everything I know here

    });//close function//

}); // close doc ready

Answer 1

我希望您在点击#contactForm后重新加载a.related，因此当文档加载时表单不存在，因此您的处理程序声明不执行任何操作。

尝试在加载表单后在$( 'a.related' ).bind内添加处理程序。

jQuery docs提到这个确切的案例：

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时的页面上。要确保元素存在且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

要使用委托事件来执行此操作，您可以执行以下操作：

$( "#myList" ).on( "submit", "form", function() {

通过这种方式，您可以将处理程序保留在原来的位置。

使用JQuery提交由Ajax加载的表单

HTML

的Javascript

1 个答案: