can't call function on element after creating it with javascript

Question

I 'm using coreUi static template.

So I'm manipulating a form.

I'm stuck at this form row that should contain websites, originally it contains 1row: input text, input URl, and a closeIcon.

There's also a add web button, so when I click it, another row in created. I successfullty implemented this feature with JS.

Now, when I press the closeIcon, I want the corresponding row to be deleted.

The problem is when I click the original's row close Button, the method is called, but when I press the other rows' close Buttons, that have been created with js, the function is not being called.

$(document).ready(function(){


  $("#add_web_links").click(function(){
                add_web_links();
         });



 $('.close').click(function(){
    close_row();
    });

});


function add_web_links()
{
 var text="<div class='form-group row web'><label class='col-1 col-form-label'>Text</label><div class='col-2'><input class='form-control' type='text'></div> <label class='col-1 col-form-label'>URL</label>  <div class='col-4'><input class='form-control' type='url'> </div> <div class='col-1'> <button type='button' class='close' aria-label='Close'>   <span aria-hidden='true'>&times;</span></button></div></div>";

  $('.web').last().after(text); 

}

function close_row()
{
alert("closed");
}

<h6><B>Web Links</B></h6>


<div class="form-group row">

  <label class="col-1 col-form-label">Text</label> 
  <div class="col-2">
    <input class="form-control" type="text">
  </div>


  <label class="col-1 col-form-label">URL</label>
  <div class="col-4">
    <input class="form-control" type="url">
  </div>

<div class="col-1">
<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>
</div>

        </div>

  <div class="col-6">
     <button id="add_web_links" type="button" class="btn btn-link px-0">add web links</button>
  </div>

</div>

Then I inspect the created close icons, they all have the class="close".

may be use on() instead click(). Refer this http://api.jquery.com/on/ — Shiljo Paulson, Jul 22 '17 at 12:33
At the time of running `$('.close').click(...)`, those dynamically added elements don't exist yet. You should use `$(document.body).on('click','.close',function() {...})` or similar. — Niet the Dark Absol, Jul 22 '17 at 12:36

score 4 · Accepted Answer · answered Jul 22 '17 at 12:37

The event handler you've got doesn't trigger because the elements you're adding using script didn't exist when the handler was set up.

Use $(document).on("click", ".close", function() { //... . This will add the listener to the whole page instead, but then delegate handling of the event down to elements matching ".close", which do not have to exist when the handler is declared. For more information go to https://api.jquery.com/on/ - read the section "Direct and delegated events".

score 2 · Answer 2 · answered Jul 22 '17 at 12:37

2

when you have element created after DOM rendered, I mean created dynamically you have to take approach of jquery event delegation concept.

$(document).on('click','<selector>',function(){
    //Your code will go here.
    ......
});

answered Jul 22 '17 at 12:37

Himanshu Upadhyay

6,558
1
20
33

1

http://api.jquery.com/delegate/ – Himanshu Upadhyay Jul 22 '17 at 12:40

Alexander · Answer 3 · 2017-07-22T13:22:50.967

1

The $('.close').click(...) adds handler to existing close button. But the handler doesn't listen another elements that will be created in future. Use event bubbling instead. Add this handler to parent container using on() method with selector to specify elements that trigger the event:

$('#myform').on('click', '. close', function() {
  close_row();
});

edited Jul 22 '17 at 13:22

answered Jul 22 '17 at 12:41

Alexander

4,420
7
27
42

Hamid Shariati · Answer 4 · 2017-07-22T14:00:28.440

you should deligate action when dynamically create new div and hide parent.prev elements + clicked button:

<script>
$(document).ready(function(){


$("#add_web_links").click(function(){
                add_web_links();
        });



$('.col-1').delegate("button","click",function(){
$( this ).parent().prevUntil().hide();
$(this).hide();
        });

});


function add_web_links()
{
var text="<div class='form-group row web'><label class='col-1 col-form-label'>Text</label><div class='col-2'><input class='form-control' type='text'></div> <label class='col-1 col-form-label'>URL</label>  <div class='col-4'><input class='form-control' type='url'> </div> <div class='col-1'> <button type='button' class='close' aria-label='Close'>   <span aria-hidden='true'>&times;</span></button></div></div>";

$('.web').last().after(text); 
$('.col-1').delegate("button","click",function(){
$( this ).parent().prevUntil().hide();
$(this).hide();
        });  

}

</script>
            <div class="form-group row">

            <label class="col-1 col-form-label">Text</label> 
            <div class="col-2">
                <input class="form-control" type="text">
            </div>


            <label class="col-1 col-form-label">URL</label>
            <div class="col-4">
                <input class="form-control" type="url">
            </div>

            <div class="col-1">
            <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
            </div>

            </div>

                <div class="col-6">
                <button id="add_web_links" type="button" class="btn btn-link px-0">add web links</button>
                </div>

            </div>
            <div class="web"></div>

I wouldn't suggest using the .delegate() method now, seeing as it's deprecated - we can expect it to be removed in future. Also it was superseded by .on() way back in jQuery 1.7 (many years ago) so there's really no reason for new code to be using it. See http://api.jquery.com/delegate/ — ADyson, Jul 22 '17 at 18:44

can't call function on element after creating it with javascript

4 Answers4

Linked