CODEWITHSUNDEEP
javascriptjqueryhtmlbuttondynamically-generated
WBaizer
WBaizer

Reputation: 3

How to make dynamically created button work like regular button

Sorry Im a newbie programmer. I need to know how to create a dynamically created button that works exactly the same as a regularly created button in Javascript/JQuery, but preferably JQuery. Here is my code.

So Here is my HTML.

<div>
     <div style="margin-top: 30px;">
         1.)<input type="text" name="inputVal1" style="margin-left:30px;">
         <textarea style="margin-left: 55px;"></textarea>
         <button class="btn btn-small btn-info" id="add-opt-field" style="margin-left: 12px;"></button>
     </div>
</div>
<div id="opt-field"></div>

And Here is my JQuery.

TL;DR it creates a lot new HTML element (but more importantly buttons with the same ID as the button in the HTML code above.

var n = 1;
$('button#add-opt-field').one('click', updateField);

function updateField()
{
    $('#add-opt-field').on('click',function(){

        $('#add-opt-field').attr("class", "btn btn-small btn-danger");
        $('#add-opt-field').attr("id", "rem-opt-field");
        var newDiv = document.createElement("div");
        var num = document.createTextNode(++n+".)");
        var textField = document.createElement("input");
        var textArea = document.createElement("textArea");
        var btnAdd = document.createElement("button");

        $(textField).attr("type", "text");
        $(textField).attr("name", "inputVal"+n);
        $(btnAdd).attr("class", "btn btn-small btn-info");
        $(btnAdd).attr("id", "add-opt-field");

        newDiv.appendChild(num);
        newDiv.appendChild(textField);
        newDiv.appendChild(textArea);
        newDiv.appendChild(btnAdd);
        document.getElementById("opt-field").appendChild(newDiv);

        $(newDiv).css('margin-top',30+"px");
        $(textArea).css('margin-left',60+"px");
        $(btnAdd).css('margin-left',15+"px");
        $(textField).css("margin-left", 30+"px");
    });

}

Upvotes: 0

Views: 982

Answers (1)

Sushanth --
Sushanth --

Reputation: 55740

For Dynamically created elements you need to use Event delegation

$(staticContainer).on('click', 'dynamicButton', updateField);

staticContainer is the elements that is already present in the DOM which is the ancestor of the newly created elements at the time the events are bound.

Also id's in a HTML page are supposed to be unique

So use a class instead of id wherein you can have multiple instance

Change your HTML of the button from 

<button class="btn btn-small btn-info"

to

<button class="btn btn-small btn-info add-opt-field"

Also you can remove this line 

$('button#add-opt-field').one('click', updateField);

Why do you want to bind your events multiple times

Your code should look like this

var n = 1;

$(staticContainer).on('click', '.add-opt-field', function(){

    var $this = $(this);
    $this.attr("class", "btn btn-small btn-danger");
    $this.attr("id", "rem-opt-field");
    var newDiv = document.createElement("div");
    var num = document.createTextNode(++n+".)");
    var textField = document.createElement("input");
    var textArea = document.createElement("textArea");
    var btnAdd = document.createElement("button");

    $(textField).attr("type", "text");
    $(textField).attr("name", "inputVal"+n);
    $(btnAdd).attr("class", "btn btn-small btn-info add-opt-field");

    newDiv.appendChild(num);
    newDiv.appendChild(textField);
    newDiv.appendChild(textArea);
    newDiv.appendChild(btnAdd);
    document.getElementById("opt-field").appendChild(newDiv);

    $(newDiv).css('margin-top',30+"px");
    $(textArea).css('margin-left',60+"px");
    $(btnAdd).css('margin-left',15+"px");
    $(textField).css("margin-left", 30+"px");
});

EDIT

If the remove button is contained inside the div it self then you can write this up

$(statucContainer).on('click', '.btn-remove', function() {
     $(this).closest('div').remove();
});

Upvotes: 3

Related Questions