Class in dynamic version doesn't work

Question

I have a problem.

when i click on my link in the static version:

<a class="ajax-portfolio" href="page.html"><span class="moreText">+</span></a>

the page and the javascript function works perfectly.

BUT, when i make a dynamic content:

<script>
    $(function() {
        var url = "json1.json";
        $.getJSON(url, function(json) {
            $.each(json.sommer, function(i, item) {

                $('<a class="ajax-portfolio" href="' + item.name + '"><span class="moreText">+</span></a>').appendTo('#betriebe');
            });
        });
    });
</script> 

the effect doesn't work correctly.

doesn't work correctly, because i got a new window. in the static version the page of the link open in a part of my page.

the problem must be, that the class doesn't work in the dynamic version. Has someone a solution? Please. Thanks in advance!!

Answer 1

You most likely have some other code that does

$('.ajax-portfolio').click(function(){...});

or

$('.ajax-portfolio').on('click', function(){...});

You need to change this to

$('#betriebe').on('click', '.ajax-portfolio', function(){...});

---

The problem is that with $('.ajax-portfolio').click you bind a handler to existing elements in the DOM (at the time the script runs). When you later add a new element with the same class your code has not been attached to it.

Using $('#betriebe').on('click', '.ajax-portfolio' allows you to delegate the event handling to a pre-existing ancestor of all .ajax-portfolio elements (since they are located inside it).

Answer 2

Assuming you were using this:

$('.ajax-portfolio').click(function(e){
    // Do stuff
});

you actually need a delegated event handler like this:

$(document).on('click', '.ajax-portfolio', function(e){
    // Do stuff
});

It works by listening for events bubbling up to a non-changing ancestor, then applying the jQuery selector. This means the elements only need to exist at event time to match. document is the default if there is nothing convenient closer to the elements.

In your case you appear to have an ancestor with id="betriebe", so the code would be very slighlty faster with that as the delegated element:

$('#betriebe').on('click', '.ajax-portfolio', function(e){
    // Do stuff
});

Note: Do not use body for delegated events, as styling can stop it receiving bubbled mouse events! Always use document as the fallback.

Answer 3

You can run your code and check source code by inspect element. You can see that html code has created properly ant then you can compare it by static one.

for(var i=0;i<12;i++)
        $('<a class="ajax-portfolio" href="' + i+ '"><span class="moreText">shahin</span>  </a>').appendTo('#betriebe');

Like I have created this one that css and link is working fine. Do you have problem creating html code dynamically? Please give me html code snapshot.