顯示/隱藏克隆Div和事件處理程序

Question

我正在克隆div #Play_Start並在其下有事件hide / show，這將特別在每個克隆的div中發生。 但是在克隆上，只有頭div事件起作用。

事件：從下拉列表中選擇“播放”，“ div隱藏”。

我希望在每個div以及同一克隆的div中觸發事件。

我的小提琴鏈接http://jsfiddle.net/kgm50e43/

 var count = 1; function clone() { if (count < 5) { $(this).parents("#Play_Start").clone() .appendTo("#Clone_Play") .on('click', 'button.clone', clone) count++; } else {} } $("button.clone").on("click", clone); function InputDropDown() { var MainNav = $('#Inputs-Control').val(); if (MainNav == 1) { alert('hi'); $('#Play_Start').children('.IconTest').hide(); }; } 

 .clone { display: block; background-color: red; padding: 10px; } .clonedInput { position: relative; overflow: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="Play_Start" class="col s12 l12 m12 First_sec clonedInput"> <div class="col s3 l3 m3 input-field"> <input type="text" id="tpOne" class="timepicker" placeholder="Start"> </div> <div class="col s2 IconTest"> asd </div> <div class="col s2 input-field"> <select id="Inputs-Control" class="form-control" name="article()" onchange="InputDropDown();"> <option value="0">Select</option> <option value="1">Play</option> <option value="2">Change</option> <option value="3">Pause</option> <option value="4">Stop</option> <option value="5">If</option> </select> </div> <div class="col s2 m2 l2"> <button class="clone btn-floating btn-small waves-effect waves-light red counter_start_btn" onclick="clone();"> <i class="material-icons">add</i> </button> </div> <div id="Clone_Play"></div> 

Answer 1

看一下這個

https://jsfiddle.net/kgm50e43/1/

$(document).on('click', 'button.clone', clone);
$(document).on('change', '.form-control', function() {
    console.log($(this).val())
    var MainNav = $('.form-control').val();

    if (MainNav == 1) {
        alert('hi');
        $('#Play_Start').children('.IconTest').hide();
    };
});

這就是您所需要的。

我在您的代碼中發現的問題：

$（'＃Inputs-Control'）。val（）

ID選擇器僅在頁面上有一個ID時才起作用，其方式應該是這樣。 如果不是，您應該使用class。

$（document）.on（'change'，'.form-control'

另外，您應該嘗試與上述綁定類似，我通常會遵循，因為它甚至可以在將來可用的元素上工作。

希望能幫助到你。