试图以某种方式添加和删除克隆无法正常工作?

时间:2013-08-31 02:30:08

标签: javascript jquery html

我真的很难找到这里出了什么问题它只是不完全加起来我在我的代码中有另一个克隆示例但是我发誓它们是相同的但是这个不起作用? http://jsfiddle.net/a4KZs/

$("#addArrival/Departure").click(function(){
        $(".question21:last").after($(".question21:first").clone(true));
    });

    $("#deleteArrival/Departure").click(function() {
        if($(".question21").length!=1)
        $(".question21:last").remove();
    });

<div class="questiontext">
                    22. Arrival/Departure Details<br>
                </div>
                <div id="question21" class="input">
                    <div class="question21">
                    Arrival Date<br>
                    <select id="selectday4" class="daydate">
                        <option>Day</option>
                    <script>
                        var select = document.getElementById("selectday4");
                        var options = new Array();
                        var temp = 1;
                        for(var i = 0; i < 31; i++) {
                            options.push(temp);
                            temp++;}
                        for(var i = 0; i < options.length; i++) {
                            var opt = options[i];
                            var el = document.createElement("option");
                            el.textContent = opt;
                            el.value = opt;
                            select.appendChild(el);}
                    </script>
                    </select>
                    <select id="selectmonth4" class="monthdate">
                        <option>Month</option>
                    <script>
                        var select = document.getElementById("selectmonth4");
                        var options = ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
                        for(var i = 0; i < options.length; i++) 
                        {
                        var opt = options[i];
                        var el = document.createElement("option");
                        el.textContent = opt;
                        el.value = opt;
                        select.appendChild(el);
                        }
                    </script>
                    </select>
                    <select id="selectyear4"  class="yeardate">
                        <option>Year</option>
                    <script>
                        var select = document.getElementById("selectyear4");
                        var options = new Array();
                        var firstyear = (new Date().getFullYear()) - 18;
                        var temp = firstyear;
                        for(var i = 0; i < 83; i++) {
                            options.push(temp);
                            temp--;}
                        for(var i = 0; i < options.length; i++) {
                            var opt = options[i];
                            var el = document.createElement("option");
                            el.textContent = opt;
                            el.value = opt;
                            select.appendChild(el);}
                    </script>
                    </select><br>
                    City/Port of Arrival<br>
                    <input type="text" name="arrival/departure" class="textbox"><br>
                    Flight/Ship<br>
                    <input type="text" name="arrival/departure" class="textbox"><br>
                    Departure Date<br>
                    <select id="selectday5" class="daydate">
                        <option>Day</option>
                    <script>
                        var select = document.getElementById("selectday5");
                        var options = new Array();
                        var temp = 1;
                        for(var i = 0; i < 31; i++) {
                            options.push(temp);
                            temp++;}
                        for(var i = 0; i < options.length; i++) {
                            var opt = options[i];
                            var el = document.createElement("option");
                            el.textContent = opt;
                            el.value = opt;
                            select.appendChild(el);}
                    </script>
                    </select>
                    <select id="selectmonth5" class="monthdate">
                        <option>Month</option>
                    <script>
                        var select = document.getElementById("selectmonth5");
                        var options = ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
                        for(var i = 0; i < options.length; i++) 
                        {
                        var opt = options[i];
                        var el = document.createElement("option");
                        el.textContent = opt;
                        el.value = opt;
                        select.appendChild(el);
                        }
                    </script>
                    </select>
                    <select id="selectyear5"  class="yeardate">
                        <option>Year</option>
                    <script>
                        var select = document.getElementById("selectyear5");
                        var options = new Array();
                        var firstyear = (new Date().getFullYear()) - 18;
                        var temp = firstyear;
                        for(var i = 0; i < 83; i++) {
                            options.push(temp);
                            temp--;}
                        for(var i = 0; i < options.length; i++) {
                            var opt = options[i];
                            var el = document.createElement("option");
                            el.textContent = opt;
                            el.value = opt;
                            select.appendChild(el);}
                    </script>
                    </select><br>
                    City/Port of Departure<br>
                    <input type="text" name="arrival/departure" class="textbox"><br>
                    Flight/Ship<br>
                    <input type="text" name="arrival/departure" class="textbox"><br>
                    Country of Destination<br>
                    <input type="text" name="arrival/departure" class="textbox"><br>
                    </div>
                </div>
                <div id="adddeleteArrival/Departure">
                    <div id="addArrival/Departure">
                        <input type="button" value="Add Arrival/Departure"> 
                    </div>
                    <div id="deleteArrival/Departure">
                        <input type="button" value="Delete Arrival/Departure">
                    </div>
                </div>

1 个答案:

答案 0 :(得分:2)

您的身份选择器无效,/中的id必须使用\/

进行转义
$("#addArrival\\/Departure").click(function () {
    $(".question21:last").after($(".question21:first").clone(true));
});

$("#deleteArrival\\/Departure").click(function () {
    if ($(".question21").length != 1) $(".question21:last").remove();
});

演示:Fiddle

注意:在小提琴中你没有包含jQuery库