1

当我通过 jQuery 设置事件处理程序时，根据数据属性 ( $("input[data-action='enable']"))选择 DOM 元素

下面的代码重复了我正在做的事情。单击按钮时，将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);
};
4

1 回答 1

2

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

此外，jQuerydata()方法不会更新底层 HTML，因此您需要将选择器更改为将要更新的属性，例如value属性：

工作演示

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

编辑：您还可以通过制作一个更智能的事件处理程序来简化这一点：

工作演示

$("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();
};
于 2013-08-05T14:03:23.033 回答