CODEWITHSUNDEEP
javascriptjqueryhtml
Marco Dinatsoli
Marco Dinatsoli

Reputation: 10590

jquery not working when elements added dynamically

I know that jquery just works with elements on DOM, but I don't know how to solve my problem though I searched a lot.

This is my code:

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

I used that code when I click on a link like:

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

The a has a class removeAction2.

This is the function for it:

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

This function is in document.ready

That function doesn't work. In other words, when I click on a, nothing happens.

Though if I added the a tag in html (not dynamically) it works.

Upvotes: 0

Views: 45

Answers (2)

d-coder
d-coder

Reputation: 1200

Try this - 

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

Upvotes: 1

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

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

You need to delegate the event. http://learn.jquery.com/events/event-delegation/ as above I have delegated to the document

Upvotes: 2

Related Questions