jQuery - 使用 onchange 事件克隆 DIV

Question

我有一个 web 表单，我目前正在其中克隆带有一个按钮 onclick 的类，它工作正常。然而，在克隆的选择标签中有一个 onchange (setspecificDetails;setDetails1)，它与克隆的选择选项一起使用 - 对克隆的选择项的任何更改都将更新克隆之前在前面部分中选择的选项，因为它引用了上面的内容变化。

有什么想法可以更好地处理这个问题吗？我想知道是否以及如何在每次克隆时更改 onchange 名称，并为每个可能性创建一个新的 onchange？或者也许有更好、更智能的方法来做到这一点！？

HTML：

<div id="entry1" class="clonedInput">
   <fieldset id="yourIssue1">
      <legend class="heading-reference">Entry #1</legend>
      <p>Please choose what your issue(s) is below. (Please note if you have multiple balances out you will need to submit each one separately)</p>
      <p>
         <label class="label_ttl">Your Request:</label>
         <select type="text" class="required select_ttl" name="request_details" id="requestdetails1" onchange="setspecificDetails(this);setDetails1(this);">
            <option value="">Select...</option>
            <option value="Trust Balance out">Trust Balance out</option>
            <option value="Bank Balance out">Bank Balance out</option>
         </select>
      </p>
   </fieldset>
   <p><label class="label_fn">Date this balance went out according to the NBS auto-validation history search in Sherlock?</label><input type="text" class="required date-picker tinyInput input_fn" id="datetrustbalanceout1" name="date_trust_balance_out"/></p>
   <p><label class="label_ln">Date this balance went out according to the NBS auto-validation history search in Sherlock?</label><input type="text" class="required date-picker tinyInput input_ln" id="datebankbalanceout1" name="date_bank_balance_out"/></p>
   <br />
   <br />
</div>
<div id="addDelButtons">
   <p><input type='button' value='add section' id='btnAdd' style='width: 200px; height: 40px' /></p>
   <p><input type='button' value='remove section above' id='btnDel' style='width: 200px; height: 40px' /></p>
</div>
<p class="submit"><input class="button" name="Submit" type="submit" value="Submit"></p>

onchange selectedIndexs：

     function setspecificDetails (detail) {
      if (detail.selectedIndex == 0) {
        $("#datetrustbalanceout1").hide();
        $("#datetrustbalanceout1").removeClass("required");
        $(".label_fn").hide();
        $("#datebankbalanceout1").hide();
        $("#datebankbalanceout1").removeClass("required");
        $(".label_ln").hide();
      } else if (detail.selectedIndex == 1) {
        $("#datetrustbalanceout1").show();
        $("#datetrustbalanceout1").addClass("required");
        $(".label_fn").show();
        $("#datebankbalanceout1").hide();
        $("#datebankbalanceout1").removeClass("required");
        $(".label_ln").hide();
      } else if (detail.selectedIndex == 2) {
        $("#datetrustbalanceout1").hide();
        $("#datetrustbalanceout1").removeClass("required");
        $(".label_fn").hide();
        $("#datebankbalanceout1").show();
        $("#datebankbalanceout1").addClass("required");
        $(".label_ln").show();

      }
  }
     function setDetails1 (detail) {
        if (detail.selectedIndex == 0) {
        $("#ID2_datetrustbalanceout").hide();
        $("#ID2_datetrustbalanceout").removeClass("required");
        $(".label_fn").hide();
        $("#ID2_datebankbalanceout").hide();
        $("#ID2_datebankbalanceout").removeClass("required");
        $(".label_ln").hide();
      } else if (detail.selectedIndex == 1) {
        $("#ID2_datetrustbalanceout").show();
        $("#ID2_datetrustbalanceout").addClass("required");
        $(".label_fn").show();
        $("#ID2_datebankbalanceout").hide();
        $("#ID2_datebankbalanceout").removeClass("required");
        $(".label_ln").hide();
      } else if (detail.selectedIndex == 2) {
        $("#ID2_datetrustbalanceout").hide();
        $("#ID2_datetrustbalanceout").removeClass("required");
        $(".label_fn").hide();
        $("#ID2_datebankbalanceout").show();
        $("#ID2_datebankbalanceout").addClass("required");
        $(".label_ln").show();
      }
  }

克隆 jQuery：

$(function () {
    $('#btnAdd').click(function () {
        var num = $('.clonedInput').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 = $('#entry' + num).clone(true).attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value

        // H2 - section
        newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Entry #' + newNum);

        // Title - select
        newElem.find('.label_ttl').attr('for', 'ID' + newNum + '_requestDetails');
        newElem.find('.select_ttl').attr('id', 'ID' + newNum + '_requestDetails').attr('name', 'ID' + newNum + '_requestDetails').val('');

        // First name - text
        newElem.find('.label_fn').attr('for', 'ID' + newNum + '_datetrustbalanceout');
        newElem.find('.input_fn').attr('id', 'ID' + newNum + '_datetrustbalanceout').attr('name', 'ID' + newNum + '_datetrustbalanceout').val('');

        // Last name - text
        newElem.find('.label_ln').attr('for', 'ID' + newNum + '_datebankbalanceout');
        newElem.find('.input_ln').attr('id', 'ID' + newNum + '_datebankbalanceout').attr('name', 'ID' + newNum + '_datebankbalanceout').val('');


        // Insert the new element after the last "duplicatable" input field
        $('#entry' + num).after(newElem);
        $('#ID' + newNum + '_title').focus();

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

        // 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) $('#btnAdd').attr('disabled', true).prop('value', "limit"); // value here updates the text in the 'add' button when the limit is reached 
    });

    $('#btnDel').click(function () {
        // Confirmation dialog box. Works on all desktop browsers and iPhone.
        if (confirm("Are you sure you wish to remove this section? This cannot be undone.")) {
            var num = $('.clonedInput').length;
            // how many "duplicatable" input fields we currently have
            $('#entry' + num).slideUp('slow', function () {
                $(this).remove();
                // if only one element remains, disable the "remove" button
                if (num - 1 === 1) $('#btnDel').attr('disabled', true);
                // enable the "add" button
                $('#btnAdd').attr('disabled', false);
            });
        }
        return false; // Removes the last section you added
    });
    // Enable the "add" button
    $('#btnAdd').attr('disabled', false);
    // Disable the "remove" button
    $('#btnDel').attr('disabled', true);
});

仍然没有得到任何帮助，有什么进一步的帮助吗？ jsfiddle.net/vyvj3k53

Answer 1

.unbind(eventType [, handler])

描述：从元素中移除之前附加的事件处理程序。

http://api.jquery.com/unbind/

如果我理解正确，您想做的是克隆包含数据的元素，但没有事件处理程序，对吧？ 在要克隆的元素上使用 .clone(true) 后，可以使用 .unbind() 从元素中删除先前附加的事件处理程序。