Klonen eines JS-Elements, das eine Kette enthält, wählen

Question

Ich habe ein Skript erstellt, um ein div zu klonen, was gut funktioniert, aber die darin enthaltene JavaScript-Funktion funktioniert nicht mehr für geklonte Elemente. Funktioniert für den ersten wie erwartet.

ich jsfiddle hier erstellt haben: https://jsfiddle.net/bvcebmbw/

Das Javascript ist wie folgt (für beide Ketten gelegt und Klon-Funktionen)

$(document).ready(function() { 
     $(".Targeting").each(function() { 

      $('#TargetingAdd').click(function() { 

       var num = $('.clonedTargeting').length, // Checks to see how many "duplicatable" input fields we currently have 
        newNum = new Number(num + 1),  // The numeric ID of the new input field being added, increasing by 1 each time 
        newElem = $('#entryTargeting' + num).clone().attr('id', 'entryTargeting' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value 

       // Insert the new element after the last "duplicatable" input field 
       $('#entryTargeting' + num).after(newElem); 

       // Enable the "remove" button. This only shows once you have a duplicated section. 
       $('#TargetingDel').attr('disabled', false); 

       init(newElem.children(".Targeting")); 

       // Right now you can only add 4 sections, for a total of 5. Change '5' below to the max number of sections you want to allow. 
       if (newNum == 5) 
        $('#TargetingAdd').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached 


      }); 

      $('#TargetingDel').click(function() { 
       // Confirmation dialog box. Works on all desktop browsers and iPhone. 
       if (confirm("Are you sure you wish to remove this Targeting?")) { 
        var num = $('.clonedTargeting').length; 
        // how many "duplicatable" input fields we currently have 
        $('#entryTargeting' + num).slideUp('slow', function() { 
         $(this).remove(); 
         // if only one element remains, disable the "remove" button 
         if (num - 1 === 1) 
          $('#TargetingDel').attr('disabled', true); 
         // enable the "add" button 
         $('#TargetingAdd').attr('disabled', false).prop('value', "add section"); 
        }); 
       } 
       return false; // Removes the last section you added 
      }); 
     }); 
     // Enable the "add" button 
     $('#TargetingAdd').attr('disabled', false); 
     // Disable the "remove" button 
     $('#TargetingDel').attr('disabled', true); 
    }); 
;(function($, window, document, undefined) { 
"use strict"; 

$.fn.chained = function(parent_selector, options) { 

    return this.each(function() { 

     /* Save this to child because this changes when scope changes. */ 
     var child = this; 
     var backup = $(child).clone(); 

     /* Handles maximum two parents now. */ 
     $(parent_selector).each(function() { 
      $(this).bind("change", function() { 
       updateChildren(); 
      }); 

      /* Force IE to see something selected on first page load, */ 
      /* unless something is already selected */ 
      if (!$("option:selected", this).length) { 
       $("option", this).first().attr("selected", "selected"); 
      } 

      /* Force updating the children. */ 
      updateChildren(); 
     }); 

     function updateChildren() { 
      var trigger_change = true; 
      var currently_selected_value = $("option:selected", child).val(); 

      $(child).html(backup.html()); 

      /* If multiple parents build classname like foo\bar. */ 
      var selected = ""; 
      $(parent_selector).each(function() { 
       var selectedClass = $("option:selected", this).val(); 
       if (selectedClass) { 
        if (selected.length > 0) { 
         if (window.Zepto) { 
          /* Zepto class regexp dies with classes like foo\bar. */ 
          selected += "\\\\"; 
         } else { 
          selected += "\\"; 
         } 
        } 
        selected += selectedClass; 
       } 
      }); 

      /* Also check for first parent without subclassing. */ 
      /* TODO: This should be dynamic and check for each parent */ 
      /*  without subclassing. */ 
      var first; 
      if ($.isArray(parent_selector)) { 
       first = $(parent_selector[0]).first(); 
      } else { 
       first = $(parent_selector).first(); 
      } 
      var selected_first = $("option:selected", first).val(); 

      $("option", child).each(function() { 
       /* Remove unneeded items but save the default value. */ 
       if ($(this).hasClass(selected) && $(this).val() === currently_selected_value) { 
        $(this).prop("selected", true); 
        trigger_change = false; 
       } else if (!$(this).hasClass(selected) && !$(this).hasClass(selected_first) && $(this).val() !== "") { 
        $(this).remove(); 
       } 
      }); 

      /* If we have only the default value disable select. */ 
      if (1 === $("option", child).size() && $(child).val() === "") { 
       $(child).prop("disabled", true); 
      } else { 
       $(child).prop("disabled", false); 
      } 
      if (trigger_change) { 
       $(child).trigger("change"); 
      } 
     } 
    }); 
}; 

/* Alias for those who like to use more English like syntax. */ 
$.fn.chainedTo = $.fn.chained; 

/* Default settings for plugin. */ 
$.fn.chained.defaults = {}; 

})(window.jQuery || window.Zepto, window, document); 


$(document).ready(function(){ 
$("#connectionSub").chained("#connectionType"); 
$("#apppagesoptions").chained("#connectionSub"); 

$("#phoneVersion").chained("#phoneBrand"); 

$("#osVersionMin").chained("#phoneVersion"); 
$("#osVersionMax").chained("#phoneVersion"); 



}); 

und die HTML-3 gekettet Eingänge:

<div class="Targeting"> 
     <select id="connectionType" name="connectionType[]"> 
      <option disabled value="">--</option> 
      <option value="pages">Facebook Pages</option> 
      <option value="apps">Apps</option> 
      <option disabled value="">--</option> 
      <option value="advanced">Advanced Connections</option> 
     </select> 
     <select id="connectionSub" name="connectionSub[]"> 
      <option value="">--</option> 
      <option value="page_like" class="pages">People who like your Page</option> 
      <option value="page_friend" class="pages">Friends of people who like your Page</option> 
      <option value="page_exclude" class="pages">Exclude people who like your Page</option> 

      <option value="app_like" class="apps">People who like your App</option> 
      <option value="app_friend" class="apps">Friends of people who like your App</option> 
      <option value="app_exclude" class="apps">Exclude people who like your App</option> 

     </select> 




     <select id="apppagesoptions" name="apppagesoptions[]" multiple> 
      <option>test</option> 
     </select> 
    </div> 
</div><!-- end #entry1 --> 
<div id="addDelButtons"> 
    <input type="button" id="TargetingAdd" value="add section"> 
    <input type="button" id="TargetingDel" value="remove section above"> 
</div> 

Schätzen Sie jede Hilfe mit diesem!

Answer 1

Für alle <div class="Targeting"> die select Element-IDs bleiben gleich. Deshalb funktioniert es nur für den ersten.