Question

我需要取消绑定上一个点击处理程序。这是我的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>

$(document).ready(function(){
    if (localStorage.getItem('eventData') !== null) {
        $.each(eventData = JSON.parse(localStorage.getItem('eventData')), function(id){
            $('#' + id).addClass('faved');
        });
    }

    $(".favourate_dextop").bind("click", function() {
        $(".favourate_dextop").unbind("click");
        console.log()
        favorite(this);
    });
});

function favorite(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));
}

我遇到的问题是：

当我在异步加载div上点击类时，有时会双击持久性。
因此我处理使用bind和unbind函数。

从我处理的解决方案是我在href上传递函数名称，如：

<a href="javascript:void(0);" onclick="favorite(this)">

 but this wrong solution.

2我试过的解决方案

 $('.favourate_dextop').on("click", function(){ console.log("ajax call"); favorite(this); });

但是这个脚本有时会失败。任何建议都是最受欢迎的。

我也试过这个解决方案，但注意到我的工作。

      function doStuff()
   {
   alert("before ajax");
   console.log("onload call"); 
    favorite(this); 

  }
 $('.favourate_dextop').on('click', doStuff);
 $('.favourate_dextop').off('click', doStuff);

2。 ajax文件动态加载数据我需要复制相同的脚本。

 $(document).ready(function(){
 if (localStorage.getItem('eventData') !== null) {
$.each(eventData = JSON.parse(localStorage.getItem('eventData')),    

 function(id){
    $('#'+id).addClass('faved');
  });
}

function doStuf()
  {
  alert("ajax");
console.log("ajax call"); 
favorite(this); 

}
   $('.favourate_dextop').on('click', doStuf);
    $('.favourate_dextop').off('click', doStuf);
});

Answer 1

你应该写

var values = [
  [
    ['Grunt'], 
    ['Something']
  ]
]
connection.query('INSERT IGNORE INTO technologies (technologyName) VALUES ?', values);

而不是

$(document).on(event,selector, function)

它将适用于所有dom元素，甚至是在加载文档后动态创建的元素。

Answer 2

为什么不直接从元素中删除该类。这样，仍然可点击的其他元素保持其可点击状态，但您单击的当前元素不再可单击。

在下文中，您可以让所有具有类clickableClass的元素响应单击事件，一旦从其中一个中删除该类，只有一个不再可单击，其余的仍将保持点击功能< / p>

<div id='firstButton' class='cssClass clickableClass'></div>
<div id='secondButton' class='cssClass clickableClass'></div>

$(document).ready(function() {
 $('.clickableClass').on('click', function() { code...});

 $('.clickableClass).on('someEvent', function() {
  $(this).removeClass('clickableClass');
 });
});

Answer 3

$(function () {
    function handleClick() {
        $('.favourate_dextop').unbind('click', handleClick);
        alert('clicked');
    }
    $('.favourate_dextop').bind('click', handleClick);

});

将处理单击并取消绑定。试试this JSFiddle。

Answer 4

对我有用的解决方案。

使用委托功能

   $(document).delegate(".favourate_dextop","click",function(){
     favorite(this); 
    });

如何在jquery中绑定和解除绑定

4 个答案: