加载外部HTML文件的行为有误

时间:2018-08-01 16:59:42

标签: javascript jquery html

嗨,我正在使用下一个代码将HTML文件加载到div中:

  $(document).ready(function(){

    $('#dialog-container').load("Dialog-Form.html");

});

但是jQuery代码功能或CSS类已禁用html代码,仅当我在页面加载时调用HTML时,我才需要加载HTML。

如果我将代码放在目标页面中,则html代码可以正常工作,正在侦听Jquery,但是如果我从文件中加载它,则会失败。

<script type="text/javascript">
$(document).ready(function(){

    $('#dialog-container').load("Dialog-Form.html");

});
    initFiltering('Table2bFiltered', 'gray');


</script>
<div id ="dialog-container">

如果我从文件中加载hmtl,js文件中的代码将无法正常工作。

  function initDialogForm(){
$(function () {

    var dialog, form,
        operador = $("#operador"),
        Value1 = $("#Value1"),
        AndOp = $("#AndOp"),
        OrOp = $("#OrOp"),
        operador2 = $("#operador2"),
        Value2 = $("#Value2"),
        allFields = $([]).add(operador).add(Value1).add(AndOp).add(OrOp).add(operador2).add(Value2),
        tips = $(".validateTips");
    dialog = $("#dialog-form").dialog({
        autoOpen: false,
        height: 300,
        width: 600,
        modal: true,
        buttons: {
            "Filtrar": function (){
                var andor = $('input[name=AndOp]:checked', '#dialog-form').val();
                CustomSorting($("#Value1").val(), $("#operador").val(), andor, $("#Value2").val(), $("#operador2").val());
                dialog.dialog("close");
            },
            Cancel: function () {
                dialog.dialog("close");
            }
        },
        close: function () {
            form[0].reset();
            allFields.removeClass("ui-state-error");
        }
    });

    form = dialog.find("form").on("submit", function (event) {
        event.preventDefault();

    });
}); }

HTML文件代码:

    <div id="dialog-form" title="Filtro Personalizado">
    <form>
           .....
    <form>    
</div>

为您提供帮助。

1 个答案:

答案 0 :(得分:1)

The .load() method可以附加回调。在HTML载入后,运行 的jQuery事件附件代码,以便实际存在DOM元素以将其附加到:

$('#dialog-container').load("Dialog-Form.html", () => {
  initFiltering('Table2bFiltered', 'gray');
  initDialogForm(); // Or whatever other code you need
});