Question

我有一个使用live（）绑定的函数：

$('.wink-back').live( "click", function( event ) {
    var uid = $(this).attr("rel");
    $(this).die( "click" ).addClass("disabled");

    $.ajax({
        type    : "POST",
        cache   : false,
        data    : "data[Wink][recipient_id]=" + uid,
        url     : "/winks/sendWink",
        success : function( data ) {        

            var newData = JSON.parse( data );

            if ( newData.Message.code == 200 ) {    // success




            } else {                                // failure

                // rebind function here

            }

        }

    });     
});

我正在使用.die（）在第一次点击时取消绑定元素中的所有实时事件，但我需要做的是将整个代码块重新绑定到该元素，如果AJAX请求返回错误代码（＆lt; 200）。

我将如何做到这一点？我基本上需要恢复绑定。

此致百里

Answer 1

编辑从jQuery 1.7开始，推荐的对事件做出反应的方法是.on()。

在您确定不再需要它们之前，请不要删除绑定。

$('.wink-back').on("click", function( event ) {      // jQuery >= 1.7
// $('.wink-back').live("click", function( event ) { // jQuery <  1.7
    var $this = $(this);
    var uid = $this.attr("rel");

    if (!$this.hasClass("disabled")) {
      $this.addClass("disabled");

      $.ajax({
        type    : "POST",
        cache   : false,
        data    : "data[Wink][recipient_id]=" + uid,
        url     : "/winks/sendWink",
        success : function( data ) {        
            var newData = JSON.parse( data );

            if ( newData.Message.code == 200 ) { // success
                $this.off("click");     // jQuery >= 1.7
                // $this.die("click");  // jQuery <  1.7
            } else {
                $this.removeClass("disabled");
            }
        }
      });
    }     
});

Answer 2

可以这么说，你似乎过早地死了。一旦确定Ajax请求确实成功，删除click事件绑定是否更有意义？

$('.wink-back').live( "click", function( event ) {
    var uid = $(this).attr("rel");

    $.ajax({
        type    : "POST",
        cache   : false,
        data    : "data[Wink][recipient_id]=" + uid,
        url     : "/winks/sendWink",
        success : function( data ) {        


            $(this).die( "click" ).addClass("disabled");
            var newData = JSON.parse( data );



        }

    });     
});

鉴于您的问题本质上是您希望在单击链接后阻止多个Ajax请求，jQuery提供了许多全局Ajax事件处理程序，可以为任何 Ajax操作执行。< / p>

关于您的特定问题，您希望在启动新的Ajax请求时禁用您单击的链接，并假设它成功，删除该元素的click事件绑定。

这是你如何做到的。

首先，我们将为任何Ajax请求设置两个全局事件侦听器，以便我们可以在操作完成之前禁用UI;一个用于Ajax请求何时开始，另一个用于何时完成：

$('#my-Element-Containing-All-WinkBack-Class-Elements').ajaxStart(function() {
  // Show an overlay over the whole page or
  // over your element containing your links with
  // opacity 0 so that any elements cannot be clicked.
}).ajaxStop(function() {
  // Remove the overlay
});

所以我们在这里做的是听取任何要求开始。一旦开始，我们就会阻止对页面（或其他页面区域 - 根据需要）的任何进一步点击，方法是在这些行中使用CSS添加透明叠加层：

.page-overlay {
    z-index: 10000;
    filter: alpha(opacity=0); /*older IE*/
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* IE */
    -khtml-opacity: 0;   /*older Safari*/
    opacity: 0;   /*supported by current Mozilla, Safari, and Opera*/
    position: absolute; top:0; left:0; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}

请求完成后，通过在.ajaxStop（）方法中删除此叠加层，您的页面会重新启用。

我已按照我的建议处理您的实际点击事件绑定。

Answer 3

使用以下函数来防止多个ajax请求。

jQuery('a.' + selectedTab + '-list-page').die();

jQuery('a.' + selectedTab + '-list-page').live('click', function() {

ajax失败后重新绑定当前功能？

3 个答案: