動態添加的div使用JS的HTML

我試圖用按鈕click.My形式看起來像這樣添加HTML divs(with textfields)： enter image description here 在add size按鈕單擊它添加一個行（Price和size）和one add More item按鈕點擊我要添加新區域name，price和size等。 HTML代碼：動態添加的div使用JS的HTML

<div class="clearfix"></div> 
        <div class="moreitems form-group" style="border:1px solid #ccc;height:200px;display:none;"> 

        </div>

我的js代碼是：

jQuery("#addmoreitems").click(function() { 
    var options = jQuery("#select1").html(); 

jQuery('.moreitems').css("display","block"); 
    var fld = '<div class="clearfix"></div><div class="form-group"><div class="col-sm-3"><label for="" class="text-left control-label">Product Name :</label></div><div class="col-sm-4"><input type="text" class="required-entry form-control" name="pname[]" id="pname"></div></div></div>'; 
    fld += '<div class="clearfix"></div><div class="form-group"><div class="col-sm-3"><label for="" class="text-left control-label">Price :</label></div><div class="col-sm-4"><input type="text" class="required-entry form-control" name="more_prices[]" id="prices"><select name="more_size[]" class="mysize">'+options+'</select></div></div>'; 
    fld += '<div class="col-sm-4"><div class="col-sm-3" style="margin-top:15px;"><button type="button" id="addsize" class="btn btn-info">Add Size</button></div></div>'; 
jQuery('.moreitems').html(fld); 
jQuery('.mysize').html(options); 


    }); 
});

但這個代碼添加第一再寄一次要添加許多倍，添加更多項目button.Also上增加更多尺寸按鈕想要添加價格和大小字段。

來源

2015-05-18 Mahmood Rehman

能否請您創建的HTML代碼演示，我有解決方案，但它會更容易幫助！ – divy3993

問題是，您正在使用html()函數，它會替換整個html內容，每次單擊按鈕時，在您想要的情況下，您的情況就是append()。

變化：

jQuery('.moreitems').html(fld);

到：

jQuery('.moreitems').append(fld);

來源

2015-05-18 08:11:10 azium

感謝您的留言，但是如何在新作品上添加尺寸？你的追加代碼的作品，但你可以幫助更多的點擊添加更多的大小 –

您好我所知的可能問題是在追加使用的.html（）方法。

這裏這兩種方法之間的差基準）給出

http://www.slideshare.net/umarali1981/jqueryappend-vs-jqueryhtml

原因html的（鏈路覆蓋DIV的內容。而.append（）將添加到DIV的內容中。所以使用這個和另一個通知是，你應該綁定'點擊'事件，儘管只使用'click'方法。

$("#addmoreitems").unbind('click').bind('click',function() { 
 
    
 
     // write your code here 
 

 
});

來源

2015-05-18 08:37:25

動態添加的div使用JS的HTML

回答

相關問題