javascript - 脚本不会对最近创建的元素生效

Question

我创建了两个用于管理列表的脚本。一种用于在页面中添加li元素并将其保存到数据库中，另一种用于将其删除。事实是，当我创建一个li元素时，第二个脚本（删除一个）不会对其生效（我必须更新页面以删除它）。我怎样才能让它工作？

我留给你两个脚本：

添加：

function afegir() {

    var fnom=document.getElementById('compranom').value;
    var fnum=document.getElementById('quantitat').value;
        $.ajax({
            data: {
                "nom": fnom,
                "num":fnum
            },
            url:   'afegir.php',
            type:  'post',
            beforeSend: function () {
            },
            success:  function (response) {
            if(response!="-1") {
                $('.llista').append('<li value="'+fnum+'" id="'+response+'" >'+fnom+'</li>');
            }
            else{
            alert('Error');
            }
            }
        }); 
    }

删除：

$(document).ready(function(){
$(".list li").click(function() {
var fid=$(this).attr('id');
    $.ajax({
        data: {
            "id": fid
        },
        url:   'treure.php',
        type:  'post',
        beforeSend: function () {
        },
        success:  function (response) {
        if(response=="si") {
            $("#"+fid+"").remove();
        }
        else{
        alert('Error');
        }
        }
    }); 
});

});

谢谢您的帮助。

Answer 1

为此使用事件委托..

$(document).ready(function(){
 $(".list").on('click','li',function() {
    var fid=$(this).attr('id');
    $.ajax({
      data: {
        "id": fid
      },
      url:   'treure.php',
      type:  'post',
      beforeSend: function () {
      },
      success:  function (response) {
        if(response=="si") {
          $("#"+fid+"").remove();
        }
        else{
           alert('Error');
        }
       }
   }); 

 });
});

链接在这里阅读更多关于委托事件

Answer 2

可以使用 live() 获取新创建的元素：http ://api.jquery.com/live/

描述：为现在和将来匹配当前选择器的所有元素附加一个事件处理程序。