如何在js文件中调用函数？

时间：2016-03-27 13:12:15

标签： javascript jquery ajax

我有一个JavaScript文件AppForm.js，我希望在成功的ajax帖子回复后重新初始化。

文件本身包含

(function(namespace, $) {
    "use strict";

    var AppForm = function() {
        // Create reference to this instance
        var o = this;
        // Initialize app when document is ready
        $(document).ready(function() {
            o.initialize();
        });

    };
    var p = AppForm.prototype;

    p.initialize = function() {
        // Init events
        this._enableEvents();

        this._initRadioAndCheckbox();
        this._initFloatingLabels();
        this._initValidation();
    };

    p._enableEvents = function () {
       //blah blah blah
       e.preventDefault();
    };

    p._initRadioAndCheckbox = function () {

    };

    p._initFloatingLabels = function () {

    };

    p._initValidation = function () {

    };

    window.materialadmin.AppForm = new AppForm;
}(this.materialadmin, jQuery)); // pass in (namespace, jQuery):

我该怎么做？

$.ajax({
    url: path, type: "POST", cache: "false",
    dataType: "html",
    contentType: "application/json; charset=utf-8",
    traditional: true,
    data: JSON.stringify(postData)
}).success(function (data) {
    $("#products-list").html(data);
    //**PERFORM INIT OF JS FILE**

}).error(function (data) {

});

感谢Dan的回答，解决方案非常接近，但由于e.preventDefault();被调用，事件无效。

以下是完整的脚本

＆＃13;
＆＃13; 
(function(namespace, $) {
	"use strict";

	var AppForm = function() {
		// Create reference to this instance
		var o = this;
		// Initialize app when document is ready
		$(document).ready(function() {
			o.initialize();
		});

	};
	var p = AppForm.prototype;

	// =========================================================================
	// INIT
	// =========================================================================

	p.initialize = function() {
		// Init events
		this._enableEvents();
		
		this._initRadioAndCheckbox();
		this._initFloatingLabels();
		this._initValidation();
	};
	
	// =========================================================================
	// EVENTS
	// =========================================================================

	// events
	p._enableEvents = function () {
		var o = this;

		// Link submit function
		$('[data-submit="form"]').on('click', function (e) {
			e.preventDefault();
			var formId = $(e.currentTarget).attr('href');
			$(formId).submit();
		});
		
		// Init textarea autosize
		$('textarea.autosize').on('focus', function () {
			$(this).autosize({append: ''});
		});
	};
	
	// =========================================================================
	// RADIO AND CHECKBOX LISTENERS
	// =========================================================================

	p._initRadioAndCheckbox = function () {
		// Add a span class the styled checkboxes and radio buttons for correct styling
		$('.checkbox-styled input, .radio-styled input').each(function () {
			if ($(this).next('span').length === 0) {
				$(this).after('<span></span>');
			}
		});
	};
	
	// =========================================================================
	// FLOATING LABELS
	// =========================================================================

	p._initFloatingLabels = function () {
		var o = this;

		$('.floating-label .form-control').on('keyup change', function (e) {
			var input = $(e.currentTarget);

			if ($.trim(input.val()) !== '') {
				input.addClass('dirty').removeClass('static');
			} else {
				input.removeClass('dirty').removeClass('static');
			}
		});

		$('.floating-label .form-control').each(function () {
			var input = $(this);

			if ($.trim(input.val()) !== '') {
				input.addClass('static').addClass('dirty');
			}
		});

		$('.form-horizontal .form-control').each(function () {
			$(this).after('<div class="form-control-line"></div>');
		});
	};
	
	// =========================================================================
	// VALIDATION
	// =========================================================================

	p._initValidation = function () {
		if (!$.isFunction($.fn.validate)) {
			return;
		}
		$.validator.setDefaults({
			highlight: function (element) {
				$(element).closest('.form-group').addClass('has-error');
			},
			unhighlight: function (element) {
				$(element).closest('.form-group').removeClass('has-error');
			},
			errorElement: 'span',
			errorClass: 'help-block',
			errorPlacement: function (error, element) {
				if (element.parent('.input-group').length) {
					error.insertAfter(element.parent());
				}
				else if (element.parent('label').length) {
					error.insertAfter(element.parent());
				}
				else {
					error.insertAfter(element);
				}
			}
		});

		$('.form-validate').each(function () {
			var validator = $(this).validate();
			$(this).data('validator', validator);
		});
	};
	
	// =========================================================================
	// DEFINE NAMESPACE
	// =========================================================================

	window.materialadmin.AppForm = new AppForm;
}(this.materialadmin, jQuery)); // pass in (namespace, jQuery):
＆＃13;
＆＃13;
＆＃13;

更新1 我在ajax响应中添加了window.materialadmin.AppForm.Initilize，但事件无法正常工作

更新2 这里的代码在回发后不起作用。

$(".ProductOnlyForDemonstation, .IncludeInMainPage, .Active")
    .on('click', 'button', function(){
        $('.sweet-overlay').toggle();
        if (jQuery("#FORM").valid()) {
            var id = $(this).attr("data-id");
            $.post("/product/DemoIncludeActive", {
                "Id": id,
                "ProductOnlyForDemonstation": $("#ProductOnlyForDemonstation-" + id).is(':checked'),
                "IncludeInMainPage": $("#IncludeInMainPage-" + id).is(':checked'),
                "Active": $("#Active-" + id).is(':checked'),
            },
            function (data) {

            }).success(function (data) {

            }).error(function () {

            });
        }
    });

12 个答案:

答案 0 :(得分：11)

您可以将代码包装在全局函数中。 

(function(namespace, $) {
  "use strict";
  window.main = function() {
    var AppForm = function () {
    // ...
    };
  };

  window.main(); // you can initialize it here
)(this.materialadmin, jQuery);

如果响应成功，则执行它。

.success(function (data) {
  $("#products-list").html(data);
  //**PERFORM INIT OF JS FILE**
  window.main();
}).error(function (data) {

});

编辑：您似乎在全局对象上公开了initialize方法。您可以在AJAX响应完成时调用该init方法。

.success(function (data) {
  $("#products-list").html(data);
  //**PERFORM INIT OF JS FILE**
  window.materialadmin.AppForm.initialize();
}).error(function (data) {

});

答案 1 :(得分：2)

与UPDATE 2相关

尝试使用委派注册您的活动：

$(document).on(
    'click',
    '.ProductOnlyForDemonstation button, .IncludeInMainPage button, .Active button',
    function() {
        // Your code
    }
);

我认为您在响应后加载了某些内容并呈现新的页面内容，因此以前注册的事件不会附加到新元素上。使用委托，即使元素被动态添加到DOM（如果它们与委托选择器匹配），您也可以使事件正常工作，因为事件附加到document并从按钮冒泡。您可以在DOM中将事件更深入地附加到document本身，但到包含您的动态内容的元素（换句话说：在完成请求后不会覆盖的最近元素）。< / p>

PS。您还可以向所有.ProductOnlyForDemonstation button, .IncludeInMainPage button, .Active button添加一些唯一的类，并将事件委托给该类（更短的定义）

答案 2 :(得分：1)

对回发后的事件进行一些检查

1）使用$（“＃products-list”）。html（data）将删除附加到#products-list的子元素的所有事件。

所以要么a）只使用事件委派In jQuery, how to attach events to dynamic html elements?在“＃products-list”上附加一次事件 或者b）使用$（“＃products-list”）后重新附加每个孩子的事件.html（数据）

2）不要使用.html（），因为它还会删除子节点上的所有jquery数据和事件。改为更新独立的子元素。

答案 3 :(得分：1)

我遇到过和你一样的问题。重新初始化事件后，所有事件都无法正常工作。

我已经尝试了很多，最后我发现了问题。当我重新初始化所有控件时，所有事件都是重新绑定。

因此他们没有被正确解雇。 所以请取消绑定与您的控件相关的所有事件，然后初始化所有控件agian并绑定所有事件。

更新回答

如果您使用 jQuery 1.7或onwarads ，请添加以下代码：

$(".ProductOnlyForDemonstation, .IncludeInMainPage, .Active").off();
$('[data-submit="form"]').off('click');
$('textarea.autosize').off('focus');
$('.floating-label .form-control').off('keyup change');
//-----------------
//**PERFORM INIT OF JS FILE**

在此之前。 //**PERFORM INIT OF JS FILE**

您正在使用 jquery 1.7以下，然后使用以下代码：

$(".ProductOnlyForDemonstation, .IncludeInMainPage, .Active").unbind();
$('[data-submit="form"]').unbind('click');
$('textarea.autosize').unbind('focus');
$('.floating-label .form-control').unbind('keyup change');
//-----------------
//**PERFORM INIT OF JS FILE**

在此之前。 //**PERFORM INIT OF JS FILE**

有关解除绑定的更多帮助，请点击here。

获取与点击here相关的更多帮助。 我希望这会有所帮助。

答案 4 :(得分：1)

要调用函数，您应该考虑以下几点：

该函数应在同一个文件中定义，或者在尝试调用之前加载一个。

该函数应该与试图调用它的范围相同或更大。

因此，以下示例应该有效：

你在first.js中声明函数fnc1，然后在第二个你可以只有fnc1（）;

first.js： 

function fnc1 (){
    alert('test');
}

second.js： 

fnc1();
index.html :

<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>

希望这会有所帮助......

答案 5 :(得分：1)

尝试这样的事情 的代码：

第1步：我们在脚本/ Hello JavaScript文件中有以下功能：

function HelloWorld() {  
    //print Hello World  
    $("#UserMessage").html("Hello World");  
}

第2步：现在我们必须在名为Activity的另一个JavaScript文件中调用它。按照下面给出的代码来调用它：

$.getScript('/Scripts/Hello.js', function () {          
      HelloWorld();  
});

答案 6 :(得分：0)

您可以在代码末尾添加行namespace.initialize = p.initialize;：

(function(namespace, $) {
    "use strict";

    /* .......  */

    // =================================================
    // DEFINE NAMESPACE
    // =================================================

    namespace.AppForm = new AppForm;
    namespace.initialize = p.initialize;
}(this.materialadmin, jQuery)); // pass in (namespace, jQuery):

然后，p.initialize全局可用materialadmin.initialize，您可以从另一个文件中调用它：

materialadmin.initialize();

答案 7 :(得分：0)

也许是两个解决方案

第一种解决方案

使用您将重新加载的函数创建一个文件js。

<script language="text/javascript">
   function load_js()
   {
      var head= document.getElementsByTagName('head')[0];
      var script= document.createElement('script');
      script.type= 'text/javascript';
      script.src= 'source_file.js';
      head.appendChild(script);
   }
</script>

在你的成功中：

.success(function (data) {
  $("#products-list").html(data);      
   load_js();
}).error(function (data) {

});

第二解决方案

与第一个解决方案类似：使用将重新加载的函数创建文件js。

使用use getScript而不是document.write - 一旦文件加载，它甚至会允许回调。

  

描述：使用GET HTTP从服务器加载JavaScript文件   请求，然后执行它。

所以你可以试试这个：

.success(function (data) {
    $.getScript('your-file.js', function() {

}).error(function (data) {

});

或简单地说：

jQuery.getScript('my-js.js');

你会尝试，并告诉我这是否有帮助。

答案 8 :(得分：0)

在ajax url脚本的顶部打印内容应该很简单：

gcloud dataproc jobs submit

你的jquery ajax代码将保持不变。您只需要在每个请求上打印脚本，以便重新初始化并绑定到您的元素。

<script src="your-js-to-be-initialized.js"></script>

答案 9 :(得分：0)

我看了你的编辑历史，看到你做了

p._enableEvents = function () {
    var o = this;

    // Link submit function
    $('[data-submit="form"]').on('click', function (e) {
        e.preventDefault();
        var formId = $(e.currentTarget).attr('href');
        $(formId).submit();
    });

    // Init textarea autosize
    $('textarea.autosize').on('focus', function () {
        $(this).autosize({append: ''});
    });
};

如果仍然是您启用事件的方式，我怀疑原因可能是您在重新初始化ajax回调后，在表单点击和textarea焦点上有多个订阅。我建议只尝试执行其他init任务，并在回调函数中排除事件绑定。

答案 10 :(得分：0)

尝试像这样：

＆＃13;
＆＃13; 
(function($) {
    "use strict";

    var materialadmin = {};

    var AppForm = function() {
        //closure
        var self = this;

        (function(){
        //todo: init events
        };)();

        //<your AppForm class's props here...>
    };

    materialadmin.Init = function(){
        //create instance of AppForm calss for materialadmin object
        materialadmin.appForm = new AppForm();
    }

    return materialadmin;
//*}(jQuery)); //  syntax mistake, i'm sorry)).*
})(jQuery);

$(document).ready(function(){
    materialadmin.Init();
});

$.ajax({
  url: path, 
  type: "POST", 
  cache: "false",
  dataType: "html", 
  contentType: "application/json; charset=utf-8",
  traditional: true,
  data: JSON.stringify(postData),
  success: function (data) {
    $("#products-list").html(data);
    
    materialadmin.Init();
  },
  error: function(){
    alert('error')}
});
＆＃13;
＆＃13;
＆＃13;

答案 11 :(得分：0)

当您使用jQuery验证程序时，您可以使用Validator的resetForm方法重置表单。

为此，您可以公开reset方法，如下所示：

    p.reset = function () {
        // Reset managed form
        $('.form-validate').data('validator').resetForm();

        // Reset custom stuff
        this._initRadioAndCheckbox();
        this._initFloatingLabels();
    };

请注意，为了在发布请求后正确重置表单，您需要将事件绑定与init内容隔离，例如，以下事件绑定应从_initFloatingLabels移至_enableEvents：< / p> 

    // Link submit function
    $('[data-submit="form"]').on('click', function (e) {
        e.preventDefault();
        var formId = $(e.currentTarget).attr('href');
        $(formId).submit();
    });

最后，您只需在POST请求的回调中调用window.materialadmin.AppForm.reset()。

相关问题
最新问题