无法使用jQuery删除动态添加的内容 [英] Unable to remove dynamically added content with jQuery

问题描述

当删除第一个字段时它工作得很好（它是在HTML标记中被硬编码），但它不会让我删除任何动态添加的字段。

这是我的jQuery代码：

  $（＃addDog）。click（function（event）
 {
 event.preventDefault （）; 
 
 var doglist =<？php echo'。$ javadogs。';？> ;; 
 var newdog ='< div>< select name =resDog []class =select>'+ doglist +'< / select>< input type =textclass =shortinputname =resResult []size =20value = />< a href =＃class =deleteDog>< img src =/ admin / images / delete.pngalt =删除狗/>< / a>< ; / div>'; 
 $（this）.parent（）。before（newdog）; 
}）; 
 $ b $（。deleteDog）。click（function（event）
 {
 event.preventDefault（）; 
 $（this）.parent（）。 remove（）; 
}）; 
  

我尝试使用jQuery的 .on（）函数，但这也行不通。

解决方案

这是您如何在 code

$ $ p $ $ $ $ c $ $（document）.on（click，.deleteDog，function（e）{
e.preventDefault（）;
$（this）.parent（）。remove（）;
}）;

理想情况下，所有这些 deleteDog 按钮都将安置在某种容器中。如果所有这些按钮都放在一个ID为 foo 的div中，您可以更有效地设置这样的事件：

$ （$code $>（＃foo）。on（click，.deleteDog，function（e）{
e.preventDefault（）;
$（this）.parent（）。remove（）;
}）;

现在，不是每次点击被检查文档中的任何地方，只有那些点击 #foo 是。

---

我猜你最初试过在上使用像这样：



  $（。deleteDog）。 on（click，function（e）{
 e.preventDefault（）; 
 $（this）.parent（）。remove（）; 
}）; 
  

这在功能上与说：

<$ （）;
$（this。）;
（this。）.parent（）。code> $（。deleteDog ）.remove（）;
}）;


忽略这样的选择器参数会创建一个直接绑定的事件被调用的 .deleteDog 选择器在时被调用的元素将被连线。

在我的原始代码中应用选择器 - 使其成为委托事件 - jQuery将监听所有点击，并且它们源自一个包含类 deleteDog 的元素，该函数将会触发。

I'm using jQuery to let users dynamically add and remove form fields, but it's not working properly.

It works perfectly fine when removing the first field (which is hard-coded in the HTML mark-up), but it won't let me remove any of the fields that have been added dynamically.

Here's my jQuery code:

$("#addDog").click(function(event)
{
    event.preventDefault();

    var doglist = <?php echo "'" . $javadogs . "'"; ?>;
    var newdog = '<div><select name="resDog[]" class="select">' + doglist + '</select><input type="text" class="shortinput" name="resResult[]" size="20" value="" /><a href="#" class="deleteDog"><img src="/admin/images/delete.png" alt="Remove dog" /></a></div>';
    $(this).parent().before(newdog);
});

$(".deleteDog").click(function(event)
{
    event.preventDefault();
    $(this).parent().remove();
});

I tried using jQuery's .on() function, but that didn't work either.

解决方案

Here's how you want to use on

$(document).on("click", ".deleteDog", function(e) {
    e.preventDefault();
    $(this).parent().remove();
});

Ideally all of these deleteDog buttons will be housed in some sort of container. If all of these buttons were to be in a div with an id of foo, you would more efficiently set up the events like this:

$("#foo").on("click", ".deleteDog", function(e) {
    e.preventDefault();
    $(this).parent().remove();
});

Now, instead of every click anywhere in the document being inspected, only those clicks that bubble up to #foo are.

---

I'm guessing you originally tried to use on like this:

$(".deleteDog").on("click", function(e) {
    e.preventDefault();
    $(this).parent().remove();
});

This is functionally identical to saying:

$(".deleteDog").bind("click", function(e) {
    e.preventDefault();
    $(this).parent().remove();
});

Omitting the selector parameter like this creates a directly-bound event—only the elements that match the .deleteDog selector at the time on is called will be wired.

Applying a selector—like in my original code—makes it a delegated event—jQuery will listen for all clicks, and if they originate from an element with the class deleteDog, the function will fire.

这篇关于无法使用jQuery删除动态添加的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！