是否可以在动态加载的内容中使用jquery“on”将加载事件附加到DIV [重复]

Question

我正在尝试使用 $('#form').validate 设置验证。大多数示例为此使用 document.ready。因为我的页面是动态加载的，所以我不能使用 document.ready。

$(#div).on('event') 的大多数例子都使用了点击事件，是否可以绑定'load'事件？

<div id="DivWhichIsntLoadedDynamically">
<div id="DynamicallyLoadedDiv">

<form id="myform">  
     <input type="text" name="entry[email]" />  <br/>  
     <input type="text" name="field2" /> <br/> 
     <input type="submit" />
</form>

</div>
</div>

$('#DivWhichIsntLoadedDynamically').on('load', function () {
    alert('div load');

    $('#myform').validate({
        rules: {
            'entry[email]': {
                email: true
            },
            field2: {
                equalTo: '[name="entry[email]"]'
            }
        },
        submitHandler: function(form) { // for demo
            alert('valid form');
            return false;
        }
    });

});

http://jsfiddle.net/JCY2E/6/

更新的小提琴： http://jsfiddle.net/JCY2E/8/

Answer 1

jQuery 允许您在父容器上附加事件。见jQuery API on。 像这样，您可以在当前未加载的内容上附加一个事件。

$("#containerWhichIsntLoadDynamically").on("myEvent", "#myform", myFunction);

Answer 2

引用 OP：

“我正在尝试使用 $('#form').validate 设置验证...因为我的页面是动态加载的，所以我无法使用 document.ready。”

您不能将.validate() 方法附加到尚不存在的任何内容。没有变通方法，因为不需要，也不需要绑定任何事件。

您只需在动态加载您的form 之后立即调用.validate() 方法。由于您从未准确显示您是如何加载此动态内容的，因此我的回答以通用按钮为例。

$(document).ready(function () {

    $('#test').on('click', function () {  // generic button -> trigger demo

        // load the form dynamically
        $('#notificationContainer').html('your form markup');

        // now you can initialize the plugin
        $('#myform').validate({ ... });

    });

});

演示：http://jsfiddle.net/DNZ9Y/