Click Event is not Working When Data loads Dynamic in jquery

Question

Scenario

• i need when user click on image , image should toggle.(only before page d"nt load), say landing page.

• then user scroll browser (load more stories ) then click on image doesn"t fires.

• i have debug issue find i have used click function on class so when page loads browser assign class to html (click works).

• then scroll load more then it browser does n"t assign class to rendering html therefore click w"nt work.

js code

  var eventData = {};
$(document).ready(function(){

  if (localStorage.getItem('eventData') !== null) {
    $.each(eventData = JSON.parse(localStorage.getItem('eventData')), function(id){
        $('#'+id).addClass('faved');
    });
  }
  });
  $('.favourate_dextop').click(function(e){
    e.preventDefault();
    if (eventData[this.id] !== undefined) {
        delete eventData[this.id];
    }else{
        eventData[this.id] = $(this).data();
    }
    $(this).toggleClass('faved');
    localStorage.setItem('eventData', JSON.stringify(eventData));
    console.log(eventData);
});  

html code

        <div  style="display:block; float:right; width:auto; color:#7c7c7c;">
            <a href="javascript:void(0);" class="favourate_dextop" title="Add to Favorites" id="fav'.$data[$k]['id'].'"
            data-sess_id="'.$data[$k]['id'].'"
            data-name="'.$name_event.'"
            data-city="'.$event_city.'"
            data-country="'.$event_country.'" 
            data-event_url="'.$event_urls.'" >
            </a>
             </div>

Fiddle : http://jsfiddle.net/o61rqj95/5/

problem

• i need click to be works also when load more data has been render.
• any suggestion are most welcome.

• click works only before load more .

  Solution i found after googling

  1. <a href="javascript:functionname(this);">
  
  2. in html file call function name.
  

  function functionname(item) { alert("test"); }

• then also alert don"t works.

working solution

var eventData = {};
 $(document).ready(function(){

if (localStorage.getItem('eventData') !== null) {
    $.each(eventData = JSON.parse(localStorage.getItem('eventData')), function(id){
        $('#'+id).addClass('faved');
    });
}
$('.favourate_dextop').on("click", function(e){ favorite(this); });

});

function favorite(item){
console.dir(item);

    if (eventData[item.id] !== undefined) {
        delete eventData[item.id];
    }else{
        eventData[item.id] = $(item).data();
    }
    $(item).toggleClass('faved');
    localStorage.setItem('eventData', JSON.stringify(eventData));
    console.log(eventData);

}

Answer 1

Use this:

$('body').on('click','.favourate_dextop',function(e){
  //code
});

Instead of

$('.favourate_dextop').click(function(e){
 //code
});