Question

我有两个按钮，一个叫做Update，另一个是view。两个按钮均正常运行。但是，如果我复制了2个按钮，则只有“查看”按钮起作用。更新按钮只是显示，没有任何点击功能。

工作代码：

<button id="AttendanceEnter" name="attendance" class="btn btn-primary">Add</button>
<button id="Attendanceview" name="attendanceview" class="btn btn-success">View</button>

无效代码：

<button id="AttendanceEnter" name="attendance" class="btn btn-primary">Add</button>

//ABove Code function is working,click function WORKING
//Below button only displaying, click function NOT working

<button id="AttendanceEnter1" name="attendance" class="btn btn-primary">Add</button>

//Below 2 buttons are working perfectly,Clicks are working 

<button id="Attendanceview" name="attendanceview" class="btn btn-success">View</button>
<button id="Attendanceview" name="attendanceview" class="btn btn-success">View</button>

完整的js在这里： 仅包含针对更新按钮的点击功能

    $(document).ready(function(){

    $('.select_date').datepicker({
        autoclose: true,
        dateFormat: date_format,
        todayHighlight: true,
        changeMonth: true,
        changeYear: true,
        maxDate: 0
    });

    /*Retrive Student List */
    $('#AttendanceEnter').click(function() {

        $( '#AttendanceClass' ).parent().parent().find('label').removeClass( 'error' );
        $( '#AttendanceDate' ).parent().parent().find('label').removeClass( 'error' );

        $('#AddModalContent').html('');
        $( '#wpsp-error-msg' ).html('');        
        var cid     =   $('#AttendanceClass').val();
        var date    =   $('#AttendanceDate').val();
        if( cid=='' )
            $( '#AttendanceClass' ).parent().parent().find('label').addClass( 'error' );
        if( date=='' )
            $( '#AttendanceDate' ).parent().parent().find('label').addClass( 'error' );
        if(cid!='' && date!=''){
            var data=[];
            data.push({name: 'action', value: 'getStudentsList'},{name: 'classid', value: cid},{name:'date',value:date});
            $.ajax({
                type: "POST",
                url: ajax_url,
                data: data,
                beforeSend:function () {
                    $.fn.notify('loader',{'desc':'Loading student list..'});
                    $('#AttendanceEnter').attr("disabled", 'disabled');
                },
                success: function( response ) {
                    $('#AttendanceEnter').removeAttr('disabled');
                    var response_data = jQuery.parseJSON(response);             
                    if( response_data.status == 0 ) {
                        $( '#wpsp-error-msg' ).html(response_data.msg);
                        $( '#AddModal' ).modal( 'hide' );
                    } else {                                
                        $('#AddModalContent').html(response_data.msg);
                    }
                },
                error:function(){
                    $('#AttendanceEnter').removeAttr('disabled');
                    $.fn.notify('error',{'desc':'Something went wrong. Try after refreshing page..'});
                },
                complete:function () {
                    $('#AttendanceEnter').removeAttr('disabled');
                    $('.pnloader').remove();
                }
            });
            $('#AddModal').modal('show');
        }
    });
///
/*Retrive Student List */
$('#AttendanceEnter1').click(function() {

    $( '#AttendanceClass' ).parent().parent().find('label').removeClass( 'error' );
    $( '#AttendanceDate' ).parent().parent().find('label').removeClass( 'error' );

    $('#AddModalContent').html('');
    $( '#wpsp-error-msg' ).html('');        
    var cid     =   $('#AttendanceClass').val();
    var date    =   $('#AttendanceDate').val();
    if( cid=='' )
        $( '#AttendanceClass' ).parent().parent().find('label').addClass( 'error' );
    if( date=='' )
        $( '#AttendanceDate' ).parent().parent().find('label').addClass( 'error' );
    if(cid!='' && date!=''){
        var data=[];
        data.push({name: 'action', value: 'getStudentsList'},{name: 'classid', value: cid},{name:'date',value:date});
        $.ajax({
            type: "POST",
            url: ajax_url,
            data: data,
            beforeSend:function () {
                $.fn.notify('loader',{'desc':'Loading student list..'});
                $('#AttendanceEnter1').attr("disabled", 'disabled');
            },
            success: function( response ) {
                $('#AttendanceEnter1').removeAttr('disabled');
                var response_data = jQuery.parseJSON(response);             
                if( response_data.status == 0 ) {
                    $( '#wpsp-error-msg' ).html(response_data.msg);
                    $( '#AddModal' ).modal( 'hide' );
                } else {                                
                    $('#AddModalContent').html(response_data.msg);
                }
            },
            error:function(){
                $('#AttendanceEnter1').removeAttr('disabled');
                $.fn.notify('error',{'desc':'Something went wrong. Try after refreshing page..'});
            },
            complete:function () {
                $('#AttendanceEnter1').removeAttr('disabled');
                $('.pnloader').remove();
            }
        });
        $('#AddModal').modal('show');
    }
});

Answer 1

使用jquery可以执行类似的操作

$("#AttendanceEnter , #Attendanceview").click(function(){
//your code
});

Answer 2

在这种情况下，name属性也应该是唯一的。您的按钮具有重复的name属性，这会使HTTP感到困惑。

两个按钮可以共享相同的“单击”功能吗？

2 个答案: