动态添加元素时，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");
    });

您需要委派活动。 http://learn.jquery.com/events/event-delegation/如上所述，我已将其委托给document

Answer 2

尝试这个 -

$(document).on("click", ".addAction2", function() {
    //your code here
});