javascript更改事件在页面加载时触发-如何避免这种情况
javascript change event fires when page loads - how to avoid this?
我有一个带有链式选择框的表单。zend控制器为这些选择框设置默认值(值来自数据库)。我是jquery的新手。
$form->setDefaults($data);
加载一个jquery文件:
$(document).ready(function(){
// set up the chained select
$("#region").remoteChained("#country", "/ws/regionstructure");
$("#province").remoteChained("#region", "/ws/regionstructure");
$("#town").remoteChained("#province", "/ws/regionstructure");
});
问题是,当页面加载时,它会触发国家/地区的更改事件,并重置所有选择。
以下是正在调用的remoteChained jquery代码:
/*
* Remote Chained - jQuery AJAX(J) chained selects plugin
*
* Copyright (c) 2010-2011 Mika Tuupola
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
*/
(function($) {
$.fn.remoteChained = function(parent_selector, url, options) {
return this.each(function() {
/* Save this to self because this changes when scope changes. */
var self = this;
var backup = $(self).clone();
/* Handles maximum two parents now. */
$(parent_selector).each(function() {
$(this).bind("change", function() {
/* Build data array from parents values. */
var data = {};
$(parent_selector).each(function() {
var id = $(this).attr("id");
var value = $(":selected", this).val();
data[id] = value;
});
$.getJSON(url, data, function(json) {
/* Clear the select. */
$("option", self).remove();
/* Add new options from json. */
for (var key in json) {
if (!json.hasOwnProperty(key)) {
continue;
}
/* This sets the default selected. */
if ("selected" == key) {
continue;
}
var option = $("<option />").val(key).append(json[key]);
$(self).append(option);
}
/* Loop option again to set selected. IE needed this... */
$(self).children().each(function() {
if ($(this).val() == json["selected"]) {
$(this).attr("selected", "selected");
}
});
/* If we have only the default value disable select. */
if (1 == $("option", self).size() && $(self).val() === "") {
$(self).attr("disabled", "disabled");
} else {
$(self).removeAttr("disabled");
}
/* Force updating the children. */
$(self).trigger("change");
});
});
/* Force updating the children. */
$(this).trigger("change");
});
});
};
/* Alias for those who like to use more English like syntax. */
$.fn.remoteChainedTo = $.fn.remoteChained;
})(jQuery);
我认为删除change
事件没有任何问题,但插件的工作方式似乎效率很低。我重构了它(未经测试),所以试试看它是如何为您工作的。
你可以这样称呼它:
$( "#region" ).remoteChained( { parentSelector: "#country", url: "/ws/regionstructure" } );
$( "#province" ).remoteChained( { parentSelector: "#region", url: "/ws/regionstructure" } );
$( "#town" ).remoteChained( { parentSelector: "#province", url: "/ws/regionstructure" } );
这不应该触发change
事件。如果你发现你需要这样做,你可以这样做:
$( '#region' ).trigger( 'change' );
这是新的插件代码。如果你有任何问题,请告诉我:
( function( $ ) {
$.fn.remoteChained = function ( options ) {
var defaults = { },
settings = $.extend( { }, defaults, options );
return this.each( function () {
var el = $( this ),
parent = $(settings.parentSelector),
data = { };
parent.each( function () {
var el = $(this);
data[ el.attr( 'id' ) ] = el.find( ':selected' ).val();
});
parentSelector.bind( 'change.remotechanged', function ( e ) {
var request = $.ajax( { url: settings.url, data: data } );
request.done( function ( response ) {
var newOption;
el.find( 'option' ).remove();
for ( var key in response ) {
if ( !response.hasOwnProperty( key ) ) {
continue;
}
newOption = $( '<option />' )
.val( key )
.append( response[ key ] );
key === 'selected' && newOption.attr( 'selected', 'selected' );
newOption.appendTo( el );
}
if ( el.find( 'option' ).length === 1 && el.val() === '' ) {
el.attr( 'disabled', 'disabled' );
} else {
el.removeAttr( 'disabled' );
}
});
});
});
};
})( jQuery );
相关文章:
- 如何避免JSON.stringify在特殊情况下返回undefined,从而为JSON.parse创建字符串失败
- 如何避免在这种情况下修改事件对象
- 避免在javascript中的jquery被注入到某个网页的情况下发生冲突
- 如何在发送keyup事件时避免出现比赛情况
- AngularJS$anchorScroll将##-锚名添加到页面URL中.我怎样才能避免这种情况
- 为什么 Angular 将 URL 片段 #foo 重写为 #/foo 以及如何避免这种情况
- Requirejs jQuery正在覆盖WordPress加载的jQuery,我怎样才能避免这种情况(通过调用noCon
- 如何使用 JSManagedValue 来避免在没有发布 JSValue 的情况下出现引用周期
- 每当我按下后退按钮或重新加载按钮时,我的计时器都会重新启动.如何避免这种情况
- 无效的 XML 格式 - 如何避免这种情况
- 在这种情况下你能避免重复吗
- 避免在物体内部出现这种情况
- javascript更改事件在页面加载时触发-如何避免这种情况
- firefox(9),javascript,由于大数据文件导致分配大小溢出.有什么办法可以避免这种情况吗
- 避免在没有使用
- js -使用填充属性的圆圈,使圆圈中的元素消失.如何避免这种情况
- 一个javascript文件会杀死所有其他的.避免这种情况的方法
- 有什么办法可以避免这种情况的发生?
- javascript避免在未选中任何框的情况下提交
- Java小程序的部署工具包:如何在没有安装JVM的情况下避免重定向