你怎么线了jQuery的时候选择改变

Question

当我有一个事件处理程序设置为通过jQuery的选择DOM元素基于数据属性（$("input[data-action='enable']")）

下面的代码复制我在做什么。单击该按钮时，会调用相应的callback函数，并更新按钮的数据操作和值元素。我期待看到，因为数据操作值发生了变化，点击处理程序会切换。有没有一种方法来设置它，以便确实发生，或者我需要在点击事件之后手动设置处理程序？

<input type="button" id="btn1" data-action="enable" value="enable" /> 
<input type="button" id="btn2" data-action="disable" value="disable" /> 

$("input[data-action='enable']").on("click", function() { 
    var callback = function(context){ 
     context.val("disable"); 
     context.data("action", "disable"); 
    }; 
    ajaxCall(true, callback, $(this)); 
}); 

$("input[data-action='disable']").on("click", function() { 
    var callback = function(context){ 
     context.val("enable"); 
     context.data("action", "enable"); 
    }; 
    ajaxCall(false, callback, $(this)); 
}); 

var ajaxCall = function(state, callback, context) { 
    //would do an ajax call, and on success 
    console.log(context.data("action")); 
    callback(context); 
}; 

Answer 1

问题是，您在其上附加处理程序的jQuery对象不是“实时”集合，并且不反映对DOM的更改。您将需要使用委托事件来处理这种情况，因为这将处理已更新的DOM元素上的事件。

此外，jQuery的data()方法不更新底层的HTML，所以你需要改变你的选择，其将被更新的属性，如value属性：

Working Demo

$(document).on("click", "input[value='enable']", function() { 
    var callback = function(context){ 
     context.val("disable"); 
     context.data("action", "disable"); 
    }; 
    ajaxCall(true, callback, $(this)); 
}); 

$(document).on("click", "input[value='disable']", function() { 
    var callback = function(context){ 
     context.val("enable"); 
     context.data("action", "enable"); 
    }; 
    ajaxCall(false, callback, $(this)); 
}); 

编辑：你也可以通过使一个稍微更智能的事件处理程序来简化：

Working Demo

$("input").on("click", function() { 
    var that = $(this), 
     action = that.val() === 'enable' ? 'disable' : 'enable' 
    ; 

    ajaxCall(false, function(){ 
     that.val(action); 
     that.data("action", action); 
     console.log(action); 
    }); 
}); 

var ajaxCall = function(state, callback) { 
    //would do an ajax call, and on success 
    callback(); 
};