動態變量和點擊不起作用

Question

單擊按鈕時會出現幾個不同的div-在這些div中，我正在添加文本和圖像。 添加文本或圖像后，我想在單擊時將其突出顯示，但僅在默認div上有效...

我試圖身體，另一個父類。.我也對其他類進行了硬編碼？ 但顯然，不應以這種方式進行。 我console.log變量-它返回正確的值，但單擊不起作用...

的HTML

<div id="box_side">
    <button value="side_front">FRONT</button>
    <button value="side_back">BACK</button>
    <button value="side_top">TOP</button>
    <button value="side_left">LEFT</button>
    <button value="side_right">RIGHT</button>
</div>
<div id="canvas_side_front" class="canvas front" style="display:none;">
    <!-- Added elements display here -->
</div>
<div id="canvas_side_back" class="canvas" style="display:none;">
    <!-- Added elements display here -->
</div>
<div id="canvas_side_top" class="canvas" style="display:none;">
    <!-- Added elements display here -->
</div>
<div id="canvas_side_left" class="canvas" style="display:none;">
    <!-- Added elements display here -->
</div>
<div id="canvas_side_right" class="canvas" style="display:none;">
    <!-- Added elements display here -->
</div>

jQuery的

//This part is not working on any other canvas than canvas_side_front
$('body').on('click', '#' + activeCanvas + ' p.de_select', function() {
    console.log('CANVAS ' + activeCanvas);
});

//default value for activeCanvas
var activeCanvas = 'canvas_side_front';

//part of code to change activeCanvas

$('body').on('click', '#box_side button', function(e) {
    e.preventDefault();
    $('.canvas_wrapper .canvas').hide();
    var selected = $(this).val();
    selected_side = $('#canvas_' + selected).attr('id');
    console.log('Selected side: ' + selected_side);
    var calcHeight = 0;
    var canvas = '';

    if (selected_side == 'canvas_side_front') {

        activeCanvas = 'canvas_side_front';
        canvas = $('#' + activeCanvas);

        $('#canvas_' + selected).show();
    } else if (selected_side == 'canvas_side_back') {

        activeCanvas = 'canvas_side_back';
        canvas = $('#' + activeCanvas);

        $('#canvas_' + selected).show();
    }
});

我知道這里沒有錯誤，因為在對其進行硬編碼時可以正常工作，但也許我忘記了什么？

$('body').on('click', '#' + activeCanvas + ' p.de_select', function() {
    console.log('CANVAS ' + activeCanvas);
});

Answer 1

您可以分配一個使畫布處於活動狀態的類，即activeCanvas，並將其與事件委托一起使用

$(document).on('click', '.activeCanvas  p.de_select', function() {
    console.log('CANVAS ' + activeCanvas);
});

$(document).on('click', '#box_side button', function(e) {
    //Rest of your code

    $('.canvas').removeClass('activeCanvas');
    $('#' + activeCanvas).addClass('activeCanvas')
});