Question

我正在使用coreUi静态模板。

所以我操纵了一个表格。

我被困在这个应该包含网站的表格行，最初它包含1row：输入文本，输入URl和closeIcon。

还有add web按钮，所以当我点击它时，会创建另一行。我成功地用JS实现了这个功能。

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

问题是，当我单击原始行的关闭按钮时，该方法被调用，但是当我按下其他行时#B;关闭按钮，使用js创建，该函数未被调用。

＆＃13;

$(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");
}

＆＃13;

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

＆＃13;

然后我检查创建的关闭图标，它们都有类=＆＃34;关闭＆＃34;。

Answer 1

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

使用$(document).on("click", ".close", function() { //...。这将把侦听器添加到整个页面，但是然后将事件的处理委托给匹配“.close”的元素，这些元素在声明处理程序时不必存在。有关更多信息，请转至https://api.jquery.com/on/ - 阅读“直接和委派活动”部分。

Answer 2

当你在DOM渲染后创建了元素时，我的意思是动态创建你必须采用jquery事件委托概念。

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

Answer 3

$('.close').click(...)将处理程序添加到现有关闭按钮。但是处理程序不会监听将来会创建的其他元素。请改为使用事件冒泡。使用带有selector的on()方法将此处理程序添加到父容器，以指定触发事件的元素：

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

Answer 4

您应该在动态创建新div并隐藏parent.prev元素+单击按钮时进行操作：

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

使用javascript

4 个答案: