Question

我对jQuery或JavaScript并不感到惊讶，所以可能有一个重复的问题，但我不知道如何表达我的搜索。我想我必须使用.trigger()或on()但我不确定如何正确实施它，或者在这种情况下可能无法实现。

我有三个页面，我的index.php页面带有HTML，dispatch.php页面通过Ajax将动态内容提供到索引页面，最后scripts.js带有我所有的jQuery / JavaScript。

这是伪代码示例：

的index.php

<form id="form1">
    <input type="text" name="whatever" />
    <input type="submit" name="whatever_submit" disabled="disabled" class="enable" />
</form>
<form id="form2">
    <input type="text" name="whatever2" />
    <input type="submit" name="whatever_submit2" disabled="disabled" class="enable" />
</form>
<!-- this is where the dispatch page will deliver content to -->
<div id="drophere"></div>

/js/scripts.js

$(document).ready(function() {
    // Runs on page load and enables all the submit buttons
    $('.enable').attr('disabled',false);
    // Code to dispatch
    $.ajax({
        url: '/dispatch.php',
        ....ect
});

/dispatch.php

<!-- Does php stuff, sends back this additional form -->
<form id="form3">
    <input type="text" name="whatever3" />
    <input type="submit" name="whatever_submit3" disabled="disabled" class="enable" />
</form>

这里的问题是jQuery $('.enable').attr('disabled',false);适用于form1和form2但现在我使用ajax加载表单而它不绑定到动态{{1}因为其他两个在文档就绪时受到影响。我成功地将form3用于交互式元素，因为有一个触发器（on.()，click等等）但这是我不太了解的被动应用程序怎么做（也许没有办法或者我没有调用正确的事件类型？）。作为一种解决方法，我将相同的启用脚本放入调度的html中：

mouseover

这看起来像是一个笨拙的解决方法，所以有没有一种正确的方法将动态内容绑定到位于<form id="form3"> <input type="text" name="whatever3" /> <input type="submit" name="whatever_submit3" disabled="disabled" class="enable" /> </form>  <script> $('.enable').attr('disabled',false); </script>上的javascript的文档就绪事件，或者是重做该段代码的正确方法使用scripts.js点击事件，类似于：

on()

我希望有一种方法可以绑定，因为我有很多其他类似的实例，但是我想我可能需要切换到每次点击一次？任何帮助将不胜感激。

Answer 1

只需在ajax-call的回调函数中执行$('.enable').attr('disabled',false);。

你可以做的是使用MutationObserver，它是现代浏览器JS引擎的一部分：https://developer.mozilla.org/en/docs/Web/API/MutationObserver

Answer 2

我认为你要将html数据附加到文档中。所以在ajax函数中你需要找到新添加的按钮然后你可以轻松地禁用它。如下面的代码。

 $(document).ready(function() {
        // Runs on page load and enables all the submit buttons
        $('.enable').attr('disabled',false);
        // Code to dispatch
        $.ajax({
            url: '/dispatch.php',
            ...#drophere
            success: function(data) {
            $('#drophere').html(data);
            // find and disable button 
            $('#drophere').find('.enable').attr('disabled',false);
        }
    });

如何将动态内容绑定到文档就绪事件？

2 个答案: