javascript - 动态添加元素时 jquery 不工作

Question

我知道jquery只能处理DOM上的元素，但我不知道如何解决我的问题，尽管我搜索了很多。

这是我的代码:

<script>
    var actions = {{json_encode($actions) }};
    var options = "";
    for(var key in actions){
        if(key == ""){
            options = ('<option value>'+actions[""]+"</option>") + options ;
        }else{
            options = options+ ('<option value="'+key+'">'+actions[key]+"</option>");
        }
    }
    var select = '<select name="action_id[]">' + options + "</select>";
    var label = '<label>Action</label>';
    var span = '<span>{{$errors->first('action_id')}}</span>';
    var a = '<a  class="removeAction2" href="javascript:"></a>';
    var li = '<li>' + label+ select + span+ a +'</li>';

</script>

当我点击如下链接时，我使用了该代码:

 this$(".addAction2").on('click', function(){
        console.log(li);
        $(li).insertBefore(".lastLI");
    });

a 有一个类 removeAction2。

这是它的功能:

$(".addAction2").on('click', function(){
        console.log(li);
        $(li).insertBefore(".lastLI");
    });

此函数位于document.ready

该功能不起作用。换句话说，当我点击 a 时，什么也没有发生。

不过，如果我在 html 中添加 a 标签(不是动态的)，它就可以工作。

Answer 1

$(document).on('click', ".addAction2", function(){
        console.log(li);
        $(li).insertBefore(".lastLI");
    });

您需要委托(delegate)该事件。 http://learn.jquery.com/events/event-delegation/如上所述，我已委托(delegate)给 document