2014-02-18 40 views
0

我需要JavaScript函数来创建新的增量divs点击图片! 它的作品!但是当我点击选择选项,我不能选择任何选项和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在图像(创建CSS丝毫雪碧)

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> 
+1

我可以看到你的HTML吗? –

+0

你可以请把你的html和js在jsfiddle中。 –

回答

2

你克隆一个元素与一个ID,从而创建具有相同ID的两个元素。 这是不允许的。

也许你可以用类来标记元素?

相关问题