Question

此功能正常工作，但如果内容是通过ajax加载的话，则不行。

    $(function () {
        $('#defid_527209').on('change', function () {
            $('#formdef_527209').submit();
        });
    });

点击没有任何反应。事件不会触发 - 没有网络或客户端错误。

加载的HTML ...

<form action="/booking/UpdateDefinite" data-ajax="true" data-ajax-method="POST" data-ajax-success="definiteupdated" id="formdef_527209" method="post"><input data-val="true" data-val-number="The field leadid must be a number." data-val-required="The leadid field is required." id="bookingleadhistory_leadid" name="bookingleadhistory.leadid" type="hidden" value="527209" />    Definite: 
<input data-val="true" data-val-required="The definite field is required." id="defid_527209" name="bookingleadhistory.definite" type="checkbox" value="true" /><input name="bookingleadhistory.definite" type="hidden" value="false" /></form>
    <script>
        $(function () {
            $('#defid_527209').on('change', function () {
                $('#formdef_527209').submit();
            });
        });

        function definiteupdated(d) {
            console.log('logged:' + d);
            if (d == "True") {
                if ($('#defcheck').length == 0) {
                    $('#defcheckhack').css("display", "inline");
                }
            } else {
                $('#defcheck').css("display", "none");
                $('#defcheckhack').css("display", "none");
            }
        }
    </script>

直到页面刷新后，Chrome源标签中才会显示html。

Answer 1

问题在于事件委托，您必须告诉预先存在的容器为您委派事件：

$(function () {
    $('body').on('change', '#defid_527209', function () {
        $('#formdef_527209').submit();
    });
});

当您将事件附加到元素时，如果在您的js代码运行时它不存在，它将永远不会获得该事件。这样，通过事件委派，您告诉body（在本例中）将事件委托给所有'#defid_527209'元素。因此，事件实际上附加到正文，但是当具有该id的元素附加到DOM时，该元素将在这种情况下从其父（'body'）接收事件。

jquery没有在通过ajax加载的内容中触发

1 个答案: