Question

我有一个打破页面上所有其他javascript / jquery的函数。

我正在尝试使用下面的功能是按下按钮时复制div并将其附加到初始按钮之后（可以按下多次按下） - 并且它工作得很好，除了其他所有内容。< / p>

我在它上面添加了一些片段仅供参考，但它是导致问题的实际函数duplicateContact()。

如果有人可以帮我指出我的错误，我很乐意能够使用该功能而不会杀死其他所有功能。

//add more contacts
document.getElementById('C_addContact').onclick = duplicateContact;


var i = 0;
var original = document.getElementById('C_contacts');
var nextElement = $.extend(original);

function duplicateContact()
{
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "C_contacts" + ++i; // there can only be one element with an ID

    nextElement.parentNode.insertBefore(clone, nextElement.nextSibling);

}

以下是我剩下的js：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
//show hidden div upon select box selection
$(function() {
    $('#otherTitleField').hide(); 
    $('#title').change(function(){
        if($('#title').val() == 'Other') {
            $('#otherTitleField').show(); 
        } else {
            $('#otherTitleField').hide(); 
        } 
    });
});


//show hidden div upon radio button selection
$(document).ready(function() {
   $('input[type="radio"]').click(function() {
       if($(this).attr('id') == 'postno') {
            $('#postalnofield').show(); 
       }        
       else {
            $('#postalnofield').hide();   
       }
   });
});

//show different hidden div based on checkboxes
function valueChanged1()
{
    if($('#tfn').is(":checked")) {
        $("#tfnfield").show();
    }
    else
        $("#tfnfield").hide();
}

function valueChanged2()
{
    if($('#abn').is(":checked")) {
        $("#abnfield").show();
    }
    else
        $("#abnfield").hide();
}

//clear contacts div
function clearBox(elementID)
{
    if(elementID != 'C_contacts') {
        document.getElementById(elementID).innerHTML = "";
    }

}
</script>

正在克隆的div的HTML：

<div id="C_contacts">
    <p><label for="C_familyName">Family name<span class="mandatory">*</span></label>
    <input type="text" id="C_familyName" name="Section C Family Name" required></p>

    <p><span style="display:inline-block; width:49%;">
    <label for="C_givenName">First given name<span class="mandatory">*</span></label>
    <input type="text" id="C_givenName" name="Section C Given Name" required></span>

    <span style="display:inline-block; width:49%;">
    <label for="C_otherName">Other given name/s<span class="mandatory">*</span></label>
    <input type="text" id="C_otherName" name="Section C Other Names" required>
    </span></p>

    <p><label for="C_position">Position held<span class="mandatory">*</span></label>
    <input type="text" id="C_position" name="Section C Position Held" required></p>

    <p><span style="display:inline-block; width:49%;">
    <label for="C_busPhone">Business phone<span class="mandatory">*</span></label>
    <input type="tel" id="C_busPhone" name="Section C Business Phone" required>
    </span>

    <span style="display:inline-block; width:49%;">
    <label for="C_mobPhone">Mobile phone</label>
    <input type="tel" id="C_mobPhone" name="Section C Mobile">
    </span></p>

    <p><label for="C_busEmail">Business email address</label>
    <input type="email" id="C_busEmail" name="Section C Email"></p>

    <p><label for="C_thisApp C_busOp">This person is the authorised contact for information about:<span class="mandatory">*</span></label><br>
    <input type="checkbox" id="C_thisApp" name="This Application" value="thisApp"> this application<br>
    <input type="checkbox" id="C_busOp" name="Operation of Business" value="busOp"> the operation of the business after we have granted a licence</p>

    <p><input type="button" id="C_removeContact" value="Remove contact" onclick="clearBox(this.parentNode.parentNode.id)"></p>
    <p><input type="button" id="C_addContact" onclick="duplicateContact()" value="Add more contacts"></p>

    <hr>
    </div>

更新：显然我有两个版本的jquery导致了问题。我不知道我是怎么错过这个 - 谢谢大家的建议和帮助，这已经解决了。

Answer 1

我不知道你的实际代码是什么，但我每次克隆你正在克隆的div remove and add buttons时都会看到。但是你需要为克隆创建一个Add button，并且所有克隆div都有删除按钮。此外，您的函数clearBox不会为新生成的div调用，为了使其正常工作您可以使用jQuery.on()并使用toggle()显示隐藏，以便您的代码可以缩短。以下是可以帮助您实现功能的工作代码段

＆＃13;

//add more contacts
document.getElementById('C_addContact').onclick = duplicateContact;
var i = 0;
var original = document.getElementById('C_contacts');
var nextElement = $.extend(original);

function duplicateContact() {
  var clone = original.cloneNode(true); // "deep" clone
  clone.id = "C_contacts" + ++i; // there can only be one element with an ID
  nextElement.parentNode.insertBefore(clone, nextElement.nextSibling);
}

//show hidden div upon select box selection
$(function() {
  $('#otherTitleField').hide();
  $('#title').change(function() {
    $('#otherTitleField').toggle(this.value == 'Other');
  });
  //show hidden div upon radio button selection
  $('input[type="radio"]').click(function() {
    $('#postalnofield').toggle(this.id == 'postno');
  });
  // using event delegation with document for removing dynamic divs
  $(document).on('click', '.remove-contacts', function() {
    $(this).closest('.c-contacts').attr('id') !== 'C_contacts' &&
      $(this).closest('.c-contacts').remove();
  });
});
//show different hidden div based on checkboxes
function valueChanged1() {
  $("#tfnfield").toggle($('#tfn').is(":checked"));
}

function valueChanged2() {
  $("#abnfield").toggle($('#abn').is(":checked"));
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="C_contacts" class="c-contacts">
  <p>
    <label for="C_familyName">Family name<span class="mandatory">*</span></label>
    <input type="text" id="C_familyName" name="Section C Family Name" required>
  </p>

  <p><span style="display:inline-block; width:49%;">
    <label for="C_givenName">First given name<span class="mandatory">*</span></label>
    <input type="text" id="C_givenName" name="Section C Given Name" required>
    </span>

    <span style="display:inline-block; width:49%;">
    <label for="C_otherName">Other given name/s<span class="mandatory">*</span></label>
    <input type="text" id="C_otherName" name="Section C Other Names" required>
    </span>
  </p>

  <p>
    <label for="C_position">Position held<span class="mandatory">*</span></label>
    <input type="text" id="C_position" name="Section C Position Held" required>
  </p>

  <p><span style="display:inline-block; width:49%;">
    <label for="C_busPhone">Business phone<span class="mandatory">*</span></label>
    <input type="tel" id="C_busPhone" name="Section C Business Phone" required>
    </span>

    <span style="display:inline-block; width:49%;">
    <label for="C_mobPhone">Mobile phone</label>
    <input type="tel" id="C_mobPhone" name="Section C Mobile">
    </span></p>

  <p>
    <label for="C_busEmail">Business email address</label>
    <input type="email" id="C_busEmail" name="Section C Email">
  </p>

  <p>
    <label for="C_thisApp C_busOp">This person is the authorised contact for information about:<span class="mandatory">*</span></label>
    <br>
    <input type="checkbox" id="C_thisApp" name="This Application" value="thisApp"> this application
    <br>
    <input type="checkbox" id="C_busOp" name="Operation of Business" value="busOp"> the operation of the business after we have granted a licence</p>

  <p>
    <input type="button" id="C_removeContact" value="Remove contact" class="remove-contacts">
  </p>
  <hr>
</div>
<p>
  <input type="button" id="C_addContact" value="Add more contacts">
</p>

＆＃13;

JS函数打破了剩余的函数

1 个答案: