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

Question

我是克隆div #Play_Start並在它下面我有事件隱藏/顯示，特別是在每個克隆的div內發生。但在克隆上只有第一個div事件起作用。

事件：從下拉列表中選擇PLAY，Div hide。

我想在每個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(); 
    }; 
}); 

這是你所需要的。

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

$（ '＃輸入 - 控制'）VAL（）

ID選擇僅適用，如果你有在頁面上的一個ID，它應該是這樣的。如果沒有，你應該使用類。

的$（document）。在（「變」，「.FORM制」

而且你應該嘗試綁定與上述類似，我通常遵循，因爲它的工作原理，甚至會元素可用的未來。

希望它能幫助。