克隆包括事件適用於其中的元素

我有一個checkbox(id="yes")這將啓用一個texbox（其ID爲「字符串」）onclicking的影響。我能夠克隆div。但是這個效果在那之後不起作用。誰能幫我嗎？克隆包括事件適用於其中的元素

HTML：

<form id="form" name="myForm"> 
     <div id="duplicater"> 
     <div id="duplicate"> 
     <label>Machine</label> 
     <select>Select<option>Opt1</option></select> 
     &nbsp; 
     <label>Connection Type</label> 
     <select><option>Select Connection Type</option> 
     </select>&nbsp; 
     <label>Command To Test</label><input type="text" value="command" />&nbsp; 
     <label>Validate</label><input type="checkbox" name="yes" value="yes" id="yes" 

     onclick="enableDisable()">&nbsp; 
     <label>Validate String</label><input type="text" id="string" name="string" size="10" 

     disabled></div></div> 
     <input type="button" value="+" class="add"> 
     </form>

JS代碼：

<script type="text/javascript"> 
     $(document).ready(function(){ 

     $(".add").click(function() { 

     var c=$('#duplicate').clone(true,true); 

     $('#duplicater').append(c); 
     $('#yes').append(function() { 
     return $('#yes').click(enabledisable); 
    }) 


    }); 
    }); 
    function enableDisable() { 
     if(document.myForm.yes.checked){ 
     document.myForm.string.disabled = false; 
     } else { 
     document.myForm.string.disabled = true; 
     } 
    } 
    window.onload = enableDisable; 
    </script>

來源

2014-03-04 user3217945

爲了清楚起見，您可以仔細檢查所有相關的HTML是否在那裏？我想你可能錯過了一兩行。（因爲一個元素似乎被削減了一半。） – Serlite

@Serlite已更新。 – user3217945

不能使用相同的ID兩次按W3C建議。如果使用它，那麼javascript/jquery將始終引用文檔中的第一個元素。

所以更新，而不是IDS

<label>Validate</label><input type="checkbox" name="yes" value="yes" class="validate-yes">&nbsp; 
<label>Validate String</label><input type="text" class="validate-string" name="validate-string" size="10" disabled>

的代碼，並使用類和使用這個js代碼：

$(document).ready(function(){ 
    $(".add").click(function() { 
     var c=$('.duplicate').clone(true,true); 
     $('#duplicater').append(c); 
    }); 
    $('#form').on('click', '.validate-yes', function(){ 
     if($(this).is(':checked')){ 
      $(this).parent().find('.validate-string').prop('disabled', false); 
     } else { 
      $(this).parent().find('.validate-string').prop('disabled', true); 
     } 
    }); 
});

來源

2014-03-04 05:10:23

沒有爲我工作。 :( – user3217945

檢查更新後的代碼，你也可以參考這個小提琴http://jsfiddle.net/BSh9c/例如 –

謝謝如此多的工作正常。:) – user3217945

檢查jQuery Clone Documentation

.clone([withDataAndEvents ] [, deepWithDataAndEvents ]) 
withDataAndEvents (default: false) 
Type: Boolean 
A Boolean indicating whether event handlers and data should be copied along with the elements. The default value is false. *In jQuery 1.5.0 the default value was incorrectly true; it was changed back to false in 1.5.1 and up. 
deepWithDataAndEvents (default: value of withDataAndEvents) 
Type: Boolean 
A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to false).

另請參閱Event Deligation和使用jQuery ON綁定事件

來源

2014-03-04 06:25:28 Champ

克隆包括事件適用於其中的元素

回答

相關問題