javascript - 当数据在 jquery 中动态加载时，单击事件不起作用

Question

场景

• 我需要当用户点击图片时，图片应该切换。(仅在页面未加载之前)，比如着陆页。

• 然后用户滚动浏览器(加载更多故事)然后点击图片不会触发。

• 我遇到调试问题，发现我在类上使用了点击功能，因此当页面加载浏览器时，将类分配给 html(点击有效)。

• 然后滚动加载更多，然后浏览器不会为呈现 html 分配类，因此单击 w"nt 工作。

js代码

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

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

问题

• 我需要点击才能在渲染加载更多数据时正常工作。
• 欢迎提出任何建议。

• 点击仅在加载更多之前有效。

  我在谷歌搜索后找到的解决方案

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

  函数函数名(元素){ 警报(“测试”)；

• 然后 alert don"t works.

工作解决方案

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

使用这个:

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

代替

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