用javascript创建元素后无法在元素上调用函数 [英] can't call function on element after creating it with javascript

问题描述

我正在使用coreUi静态模板.

I 'm using coreUi static template.

所以我正在处理一个表格.

So I'm manipulating a form.

我被困在应该包含网站的此表单行中，最初它包含1行:输入文本，输入URl和closeIcon.

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

还有一个add web按钮，因此当我单击它时，将创建另一行.我用JS成功实现了此功能.

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

现在，当我按下closeIcon时，我希望删除相应的行.

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

问题是，当我单击原始行的关闭按钮时，会调用该方法，但是当我按下已用js创建的其他行的关闭按钮时，就不会调用该函数.

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>

然后，我检查创建的关闭图标，它们都具有class ="close".

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

推荐答案

您获得的事件处理程序不会触发，因为在设置处理程序时，您使用脚本添加的元素并不存在.

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.

使用$(document).on("click", ".close", function() { //....它将改为将侦听器添加到整个页面，但随后将事件的处理委派给匹配".close"的元素，当声明处理程序时，这些元素不必存在.有关更多信息，请访问 https://api.jquery.com/on/-阅读本节直接事件和委派事件".

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".

这篇关于用javascript创建元素后无法在元素上调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！