Question

我有一个网络表单，我目前正在使用按钮onclick克隆类，这样工作正常。但是在select标记中有一个onchange（setspecificDetails; setDetails1），克隆了选择选项 - 克隆选择项的任何更改都将更新克隆之前已经选择的选项，因为它引用了上面的内容onchanges。

任何想法我怎样才能更好地处理这个问题？我想知道是否以及如何在每次克隆时更改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（）从元素中删除以前附加的事件处理程序。

jQuery - 使用onchange事件克隆DIV

1 个答案: