javascript - 为什么当我点击选择框时，javascript 创建新的 div？

Question

我需要 JavaScript 函数来通过单击图像来创建新的增量 div!有用!!但是当我点击选择选项时，我无法选择任何选项并且 JavaScript 总是创建新的 div。为什么？

<script type="text/javascript">     
var i = 1;
var p = 1;
function duplicate() {
    var original = document.getElementById('room');
    var subDiv = document.getElementById('subroom');
    var clone = subDiv.cloneNode(true); // "deep" clone
   // document.getElementsByName("st").innerHTML = "Room "+ ++p;  
    clone.setAttribute('class', "sw-room sw-room-"+ ++i); // there can only be one element with an ID
    //subDiv.setAttribute('class', "sw-room sw-room-"+ ++i );
   // clone.setAttribute('class', "sw-room sw-room-"+ ++i); // there can only be one element with an ID
    clone.onclick = duplicate; // event handlers are not cloned
    var find = document.getElementById('fff');
    original.appendChild(clone, find.nextSibling);
}
</script>

我需要我的脚本 onclick 在图像上(创建 whit css Sprite)

div id="searchbox" class= "border-radius">
        <span class="searchbox-elem">
        <strong id="sb-title">Check Availability</strong>
        <input id="city" type="text" title="Where do you want to go?" placeholder = "Your destination..." autocomplete="off" value="" alt="" name="city" tabindex="1">

        </span>
    <span class="searchbox-elem">
        <span id="searchbox_from" class="sb-label"></span>
        <input id="checkin" class="hasDatepicker" type="text" maxlength="20" placeholder = "check-in date..."autocomplete="off" value="" alt="dd/mm/yyyy" name="checkin" tabindex="2">
    </span>
    <span class="searchbox-elem">
        <span id="searchbox_to" class="sb-label"></span>
        <input id="checkout" class="hasDatepicker" type="text" maxlength="20" placeholder = "check-out date..."autocomplete="off" value="" alt="dd/mm/yyyy" name="checkout" tabindex="3">
    </span>

    <div id = "room"  class="sw-rooms-list">
        <span class="searchbox-elem">

        <div id = "subroom" class="sw-room sw-room-1">
            <div name = "st" class="searchbox_room_count">Room 1</div>
            <div class="pval_container">
                <div class="sw-placeholder">2 adults</div>
                    <select class="pval pval_r1" name="pval_r1">
                        <option value="1">1 adult</option>
                        <option selected="selected" value="2">2 adults</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
        </div>
        <div class="cval_container">
            <div class="sw-placeholder">0 children</div>
                    <select class="cval cval_r1" name="cval_r1">
                        <option selected="selected" value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                    </select>
            </div>
    </div>
        </span>

 </div>
    <div id = "aaa">
        <a id = "add" href = "#" class= "sw_close_modal" style ="display:block;"onclick="return duplicate()"></a>
        <span class = "add-day">Add 1 more </span>
    </div>
    <div id = "fff" class = "searchbox-elem" >
    <input id="find" class="button btn-blue" type="submit" border="0" value="FIND HOTEL" title="" onblur="0">
    </div>
</div>

Answer 1

您正在克隆一个具有 id 的元素，从而创建两个具有相同 id 的元素。这是不允许的。

也许您可以用类来标记元素？