显示的事件不适用于Internet Explorer

时间:2013-03-13 11:50:39

标签: jquery internet-explorer twitter-bootstrap modal-dialog

我在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('&nbsp;<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() {

0 个答案:

没有答案