我在jquery中显示了事件的兼容性问题。 我用 : - Twitter引导模态系统 - jQuery 1.9 +
我的JS代码:
$('#page_patients #add_patient_button').on('click', function(event) {
var modal = $("#myModal").load("inc/tpl/modal_add_patients.tpl", function() {
$(this).on('shown', function() {
$('#add_patient_form #uf_code').val($('#page_patients #cur_uf_code').val());
$("#add_patient_form input:first").focus();
$('#add_patient_form #create_patient_button').on('click', function(event) {
event.preventDefault();
var errors = 0;
var form = $(this).parents('form');
form.find('input:text').each(function() {
var obj_help_inline = $(this).next('.help-inline');
var obj_ctrl_group = $(this).parents('.control-group');
var str_current_value = $(this).val();
var str_label = $('label[for=' + this.name + ']').text();
obj_help_inline.hide();
if(obj_ctrl_group.hasClass('success')) {
obj_ctrl_group.removeClass('success');
}
if(obj_ctrl_group.hasClass('error')) {
obj_ctrl_group.removeClass('error');
}
if(str_current_value == '') {
obj_ctrl_group.addClass('error');
obj_help_inline.text('Vous devez saisir un ' + str_label.toLowerCase());
errors = errors + 1;
}
else if(str_current_value.length < 3) {
obj_ctrl_group.addClass('error');
obj_help_inline.text('Minimum 3 caractères requis');
errors = errors + 1;
}
else {
obj_ctrl_group.addClass('success');
obj_help_inline.text('Ok');
}
obj_help_inline.show();
});
if(errors == 0) {
$(this).after(' <img src="inc/img/ajax-loader.gif" />');
$(this).text('Traitement en cours...').prop('disabled', true);
$(this).next("img").load(function() {
$('#add_patient_form').submit();
});
}
else {
return false;
}
});
});
});
});
inc / tpl / modal_add_patient.tpl内容:
<form id="add_patient_form" class="form-horizontal" method="post" action="traitement.php">
<div class="modal-header">
<h3 id="myModalLabel">Ajouter un patient</h3>
</div>
<div class="modal-body">
<div class="control-group">
<label class="control-label" for="nom">Nom</label>
<div class="controls">
<input type="text" id="nom" name="nom" tabindex="1">
<span class="help-inline"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="prenom">Prénom</label>
<div class="controls">
<input type="text" id="prenom" name="prenom" tabindex="2">
<span class="help-inline"></span>
</div>
</div>
<input type="hidden" name="p" value="patients" />
<input type="hidden" name="action" value="add_patient" />
<input type="hidden" id="uf_code" name="uf_code" value="" />
</div>
<div class="modal-footer">
<a class="btn close-modal" data-dismiss="modal" aria-hidden="true" tabindex="4">Annuler</a>
<a id="create_patient_button" class="btn btn-primary" tabindex="3"><i class="icon-plus icon-white"></i> Ajouter le patient</a>
</div>
</form>
我的div模式:
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static"></div>
此行适用于Google Chrome,但不适用于Internet Explorer 8/9:
$(this).on('shown', function() {