0

谢谢你的帮助。我在 Web 应用程序中有一系列用于 UI 目的的表单元素。我正在使用 jQuery 创建元素并添加侦听器。#topbar DIV 中的控件在事件发生时不会被监听,但 #sidebar DIV 中的控件会被监听。我不确定为什么。能帮忙吗,谢谢。下面是创建控件的函数...

function constructToolbars(){
        //----------------------------TOPBAR-------------
        //ZONE
        $('#topbar').html('ZONE: ');

        var zoneRadios = ["All", "None"];
        var zoneRadio;
        for(var i=0; i<zoneRadios.length; i+=1){
            zoneRadio = zoneRadios[i];
            $('<input />', {
                type: 'radio',
                id: 'zone' + zoneRadio, name: "zoneRadios", value: zoneRadio,
                checked: zoneRadio === 'All'
                }).appendTo('#topbar');
            $('<label />', {
                'for': 'zone' + zoneRadio, text: zoneRadio
                }).appendTo('#topbar');
        }
        //THIS LISTENER IS NOT TRIGGERED WHEN USER CHANGES
        $( "input:radio[name=zoneRadios]" ).on("change", readRadios);

        var regions = ART.regions;
        var region;
        for(var i=0; i<regions.length; i+=1){
            region = regions[i];
            $('<input />', {
                type: 'checkbox', "class": "zones",
                id: 'zone' + region, name: region, value: region,
                checked: true
                }).appendTo('#topbar');
            $('<label />', {
                'for': 'zone' + region, text: region
                }).appendTo('#topbar');
        }
        //THIS LISTENER IS NOT TRIGGERED WHEN USER CHANGES
        $('.zones').on("change", readToolbars);


        //TIME
        topbar.innerHTML += " ---- TIME: ";
        var timeRadios = ["Current", "Custom"];
        var timeRadio;
        for(var i=0; i<timeRadios.length; i+=1){
            timeRadio = timeRadios[i];
            $('<input />', {
                type: 'radio',
                id: 'time' + timeRadio, name: "timeRadios", value: timeRadio,
                checked: timeRadio === 'Current'
                }).appendTo('#topbar');
            $('<label />', {
                'for': 'time' + timeRadio, text: timeRadio
                }).appendTo('#topbar');
        }
        //THIS LISTENER IS NOT TRIGGERED WHEN USER CHANGES
        $( "input:radio[name=timeRadios]" ).on("change", readRadios);

        topbar.innerHTML += ": ";
        var dateFields = ["From", "To"];
        var dateField;
        for(var i=0; i<dateFields.length; i+=1){
            dateField = dateFields[i];
            $('<label />', {
                'for': 'date' + dateField, text: dateField
                }).appendTo('#topbar');
            $('<input />', {
                type: 'date', "class": "times",
                id: 'date' + dateField, name: dateField, value: "<?php echo date('Y-m-d', strtotime(date('Y/m/d'))); ?>",
                }).appendTo('#topbar');
        }
        $('<input />', {
            type: 'submit', "class": "times",
            id: 'dateGo', name: 'timeGo', value: 'Go',
            }).appendTo('#topbar');
        //THIS LISTENER IS NOT TRIGGERED WHEN USER CHANGES
        $('.times').on("change", readToolbars);

        //------------------SIDEBAR------------------
        //PLAYERS
        $('<p>',{text: 'PLAYERS'}).appendTo('#sidebar');
        var playerRadios = ["All", "None"];
        var playerRadio;
        for(var i=0; i<playerRadios.length; i+=1){
            playerRadio = playerRadios[i];
            $('<input />', {
                type: 'radio',
                id: 'player' + playerRadio, name: "playerRadios", value: playerRadio,
                checked: playerRadio === 'All'
                }).appendTo('#sidebar');
            $('<label />', {
                'for': 'player' + playerRadio, text: playerRadio
                }).appendTo('#sidebar');
        }
        //add event listener to this set of radio buttons
        $( "input:radio[name=playerRadios]" ).on("change", readRadios);

        var players = [];
        var numReviewers = ART.currentReviewers.length;
        ART.currentReviewers.sort(byAscending('loginName'));
        for (var i=0; i<numReviewers; i+=1){
            players.push(ART.currentReviewers[i].loginName);
        }
        var player;
        for(var i=0; i<numReviewers; i+=1){
            player = players[i];
            $('<br />').appendTo('#sidebar');
            $('<input />', {
                type: 'checkbox', "class": "players",
                id: 'player' + player, name: player, value: player,
                }).appendTo('#sidebar');
            $('<label />', {
                'for': 'zone' + player, text: player
                }).appendTo('#sidebar');
        }
        //add event listener to checkbox elements of this class
        $('.players').on("change", readToolbars);

        //ACTIVITY
        $('<p>',{text: 'ACTIVITY'}).appendTo('#sidebar');
        var activityRadios = ["All", "None"];
        var activityRadio;
        for(var i=0; i<activityRadios.length; i+=1){
            activityRadio = activityRadios[i];
            $('<input />', {
                type: 'radio',
                id: 'activity' + activityRadio, name: "activityRadios", value: activityRadio,
                checked: activityRadio === 'All'
                }).appendTo('#sidebar');
            $('<label />', {
                'for': 'activity' + activityRadio, text: activityRadio
                }).appendTo('#sidebar');
        }
        //add event listener to this set of radio buttons
        $( "input:radio[name=activityRadios]" ).on("change", readRadios);

        var activities = ART.alertCategories;
        activities.unshift("touches");
        var numActivities = activities.length;
        var activity;
        for(var i=0; i<numActivities; i+=1){
            activity = activities[i];
            $('<br />').appendTo('#sidebar');
            $('<input />', {
                type: 'checkbox', "class": "activities",
                id: 'activity' + activity, name: activity, value: activity,
                }).appendTo('#sidebar');
            $('<label />', {
                'for': 'activity' + activity, text: activity
                }).appendTo('#sidebar');
        }
        //add event listener to checkbox elements of this class
        $('.activities').on("change", readToolbars);
    }
4

1 回答 1

1

这些是实际重置 HTML 并因此操作 DOM 的行。

topbar.innerHTML += " ---- TIME: " & topbar.innerHTML += ": "

这实际上相当于将 HTML 重置为

topbar.innerHTML = topbar.innerHTML + " ---- TIME: "

请将最后的所有事件一起绑定以避免这种情况或使用更高级别的侦听器,例如$('#topbar').on("change", '.zones', readToolbars)

代替$('.zones').on("change", readToolbars)

于 2013-10-04T13:57:15.850 回答